GRC 175 Assignment 1 Creating HTML authored webpages using a text editor Tasks: 1. Acquire web host space with ad free provider 2. Create an index webpage (index.html) 3. Create a class management webpage (cmp.html) 4. Create a contact webpage (contact_me.html) 5. Add additional examples of popular html tags 6. Upload pages to your web host 7. View and test uploaded web pages 8. Send an email with your website URL to the Instructor Assignment overview: This week we will be introduced to creating a basic webpage using HTML. We will create two webpages using a plain text editor called Text Edit on the Mac or Notepad on a PC. We will author our webpage s using basic HTML tags and save our documents with the.html file extension. Using HTML tags we can create a web page document that displays within a web browser and is publishable onto the World Wide Web. We will need to open a hosting account in order to publish our pages onto the web. Finally, we will use an FTP program to put or upload our files to our web hosting account. In order to complete this Assignment you will need access to a plain text editor, a web browser, an FTP program, and have Internet access. You are not allowed to use a web editing program like Dreamweaver for this assignment. 1
HTML Primer/Intro What is HTML? HTML stands for HyperText Markup Language. A webpage is simply a plain text document, authored using html tags and saved with the.html file extension. Using HTML tags we can author our own web page using a plain text editor and then save it with the.html file extension. Text and images can be displayed within a webpage with desired formatting. The webpage is viewable within a web browser and publishable onto the World Wide Web. HTML tags can be used to mark up how we want the text inside the webpage to look. Every time we want to display text a certain way inside the webpage we use a pair of tags, containing an opening and a closing tag. HTML tag example <strong>text to be bolded goes inside the strong tags</strong> HTML requires you to use tags in order to format text or content. Most, but not all HTML tags, come in pairs, an opening and closing tag. Every time you want a webpage to have a certain appearance or format you will need to use the corresponding HTML tag. Hyperlinks or links enable you to link a webpage to other webpage s published on the WWW or World Wide Web. Every webpage is required to have a minimum set of HTML tags, shown on the next page. HTML tags should be typed in lower case for current versions of HTML. The latest version of HTML is now known as HTML5. All of your page s main content will go inside the <body></body> tags shown on the next page. 2
Min required HTML tags for a basic webpage <html> <head> <title> </title> </head> <body> </body> </html> Notice in the above example all the required tags come in pairs. A tag is closed with a second closing tag containing a /. Most content for a webpage goes in between the two body tags as shown below. Please note there can only be one set of body tags. <body> content will go here </body> It may be easier to look at the required HTML tags in sections. The head contains info about the webpage including a set of title tags. The body contains the main content that you are used to seeing in the web browser. The extra spacing shown below is used to make the tags more readable, the web browser would ignore the extra spacing when it in renders the HTML code within the web browser. <html> <head> </head> <title> My title goes inside the title tags and shows in the browsers header </title> <body> Main content goes inside the body tags displays in the main webpage </body> </html> 3
An example webpage and its html code are shown below with the required html tags and some additional tags. Most content and popular tags go inside the <body></body>. <html> <head> <title> My first webpage. The title shows up in the very top header of the web browser. </title> </head> <body> Hi welcome to my first webpage. Any content I want to display within the page goes here. Any formatting or styling will require a HTML tag. For example, <strong> this text will be bold.</strong>the bold text has the strong tag around it so it will be bolded. Here I will be adding a line break. <br> This sentence will begin on a new line. Next I will add a picture using the img tag. <img src="boy.jpg"> </body> </html> Important note: Remember HTML tags can be typed inside a plain text editor and then saved as a webpage document with the.html file extension. The resulting file like sampler.html will be viewable through a web browser like Internet Explorer and is then publishable onto the World Wide Web by uploading (using FTP or File Transfer Protocol) to a web host account. 4
The most commonly used HTML tags (these tags must go inside the body) Paragraph tag, adds 1 line of spacing before and after the paragraph <p>paragraph content goes here. You can have many words and/or sentences.</p> Bold text <strong>bold text goes here</strong> Italicized text <em>italicized text goes here</em> Hyperlink, links to another webpage or file, URL is the link or file it will take you to <a href="url goes here">type a name for the link</a> Example: <a href="http://www.cnn.com">a link to Cnn s Website</a> <a href="http://www.office.com/word.pdf">a link to a pdf file</a> Image <img src="image filename location goes here"> Example: <img src="http://www.art.com/images/flowers.jpg" /> Line Break, inserts a line break or carriage return to next line <br> Table, provides a structure for holding data. A represents a table row and a <td> represents a table cell inside the row <table> <td>content goes here, this is a cell</td> <td>content goes here too, this is another cell</td> </table> (continued on next page ) 5
Headline text, size 1-6 possible, size 1 largest <h1>heading 1 text goes here</h1> Unordered list (bulleted list) <ul> <li>1st list item text goes here</li> <li>2nd list item text goes here</li> <li>3rd list item text goes here</li> </ul> Ordered list (ordered numbered list) <ul> <li>1st list item text goes here</li> <li>2nd list item text goes here</li> <li>3rd list item text goes here</li> </ul> mailto: hyperlink, links to a email address (not fully supported by browsers) <a href="mailto:john.doe@csn.edu">john.doe@csn.edu</a> Align="center" centers the paragraph <p align="center">paragraph text goes here</p> 6
Here s an example webpage important note. Notice how most tags go inside the body tags. <html> <head> <title>adam's Homepage</title> </head> <body> <p> Welcome to my first webpage.<br> Here's a cool image of Bill Gates and Slash: <br> <img src=http://www.art.com/slash_gates.jpg> <br> Checkout my favorite news site: <a href="http://www.cnn.com">cnn</a> HDTV seems to be the biggest electronics buzz this year </p> <table> <td>analog TV</td> <td>hdtv</td> <td>currently Predominant</td> <td>future of TV req'd by June 2009</td> <td>affordable, most people already own a analog tv</td> <td>expensive, most people own only one or none at all</td> </table> </body> </html> Any extra spacing, as shown above, added to the code will be ignored. For example, the first paragraph with its extra line spacing is actually only 1 paragraph, the extra spacing is ignored. Any time you want extra line spacing you have to use an HTML tag like <p> </p> or <br > to create actual spacing. Note: If you wanted to see what this page would look like you could copy the code and paste into a plain text editor and then save as example.html and then you would be able to view page using a web browser by double clicking on the file wherever it was saved. 7
Plain text editor overview: For this assignment we will use a plain text editor like Text Edit (Mac) or Notepad (Pc), no visual editor like Dreamweaver allowed. Remember to save your files into a GRC 175 folder For this Assignment we must save our webpages to the root of the grc 175 folder, meaning do not put into any additional folder inside the 175 folder. This means do not create an A1 folder within your 175 folder. Once I save my document I can attempt to view in a web browser by double clicking on the file wherever the file was saved, the default program, a web browser like Internet Explorer or Safari will open the file. Also, once I have a web page open in a browser I can view its HTML code by viewing the source, View>Source in IE, View>View Source in Safari Pc users using Notepad When using Notepad on a pc you are automatically editing in plain text, when using Text Edit you will need to first set the preferences see below. On a PC Notepad can be found start>run>notepad. Notepad automatically creates a plain text document there are no preferences which need to be set. 8
Mac users using Text Edit see requirements below In the Mac labs there may should a shortcut to Text Edit on the dock, if not Text Edit can be found under the Applications folder ü When using Text Edit on a Mac you must set the preferences so that you edit in plain text only without any type of formatting. ü Within Text Edit click on Text Edit >Preferences (located at top menu) ü Under the New Document tab select the plain text option for new documents ü Click on the Open and Save tab and select the ignore rich text commands in html option ü Once you set the preferences close that window and you will need to open a new document, File>New. There should be no formatting toolbar showing at the top of the new document. ü When you save your webpage within Text Edit you need to add the.html file extension, save the first page as index.html ü When saving as.html Text Edit will prompt you to verify you want to save as.html, make sure to save.html and not.txt 9
Step 1 Acquire Web hosting space Open a free web hosting account through an external hosting provider. You will need a web host account in order to complete the coursework for this class. There are many free hosting accounts available, make sure they do not contain advertising. Host should provide at least 250mb space for your files. Signup and activate a free web hosting account. For example find a free web hosting company and activate an account (pick any host company but do not pay for anything, it should be entirely free) Make sure to not register a domain name since this costs money many hosts will have you pick a unique and free sub domain like adamssite.webhost.com ü Recommended free web hosting account companies: Please note these recommendations change every semester. If you have any problems with a free host open a new account with another host. http://www.freewebhostingarea.com http://www.leadhoster.com/signup.html https://www.awardspace.net/signup.html?gid=1111& http://byethost.com/free-hosting/news Once you create a web host account write down your ftp/hostname info: Hostname/ftp address Username/login name Password Website URL Here is an example (yours info will be different, every host uses different values) Hostname/ftp address ftp.freehostia.com Username/login name avalentiner Password ########## Website URL http:://avalentiner.freehostia.com 10
Step 2 Create an index webpage (index.html) Most webhosts require you to have an index.html page stored within your web host directory. The index page is the default page to show under your host directory. We will start out by creating an index page using a plain text editor and authored using the basic required HTML tags. On a pc you can use a program called Notepad, Start>Run>Notepad On the Mac we will use a program called Text Edit, found under our Applications folder. ü Mac users will have to set the preferences for Text Edit, see below Within Text Edit click on Text Edit >Preferences (located at top menu) Under the New Document tab select the plain text option for new documents Click on the Open and Save tab and select the ignore rich text commands in html option Close preferences window, red button at top Open a new document, a plain text document should open Plain text means there is no formatting bar at the top of the editor. Once you set the preferences you will need to open a new document. Please note tags in HTML are now case sensitive; always use lowercase. Copy and paste the following required HTML tags into the text editor. <html> <head> <title> First Name Last Name index page </title> </head> <body> </body> </html> Next we will want to save this file into a course folder. 11
You will need to create a folder in order to save all your coursework during the semester. Save somewhere you can easily find like your desktop or your jumpdrive. Create a folder on your desktop called GRC 175 Save file as index.html, save file within your GRC175 folder. The index page is the default page that will show under your directory or web space. Our page will be very simple. Type your name within the opening and closing title tags. Next we want to add a hyperlink. A hyperlink provides text which is clickable and takes the viewer to a specified webpage when clicked on. The hyperlink tag, shown below, must go somewhere inside the body tags. Copy and paste the following into your body. <a href="cmp.html"> Course management Link</a> The hyperlink tag we have added creates a hyperlink to another webpage named cmp.html. We will be creating this second page in one of the next steps. An example of my entire code is shown below. <html> <head> <title> First Name Last Name index page </title> </head> <body> <a href="cmp.html"> Course management Link</a> </body> </html> You can put whatever you want on your index page. Make sure to at least put some content and a unique title. Save file. Make sure you have saved file as index.html and saved file within a GRC175 course folder. 12
Once saved go and find the file and then double+click on the file to preview within a web browser. Note how the HTML title shows in the top header of a web browser. Step 3 Create the project management page (cmp.html) Next, we will create another web page also using the plain text editor and the basic HTML tags. First, create a new document File>New and then type or copy and paste the following basic required HTML tags within textedit or notepad. <html> <head> <title> a title can go here </title> </head> <body> main content of your webpage will go here </body> </html> Add a unique title, add two paragraph tags as shown below, and then replace with your own unique info. Paragraph tag <p></p>, adds spacing around any content inside each paragraph <p></p> (Do not type another set of the basic required tags into textedit simply add the content highlighted below, your entire should look similar to the following) 13
<html> <head> <title> first name last name grc 175 project management page </title> </head> <body> <p> project management page grc 175 </p> <p> first name last name </p> </body> </html> Replace the example data with your own info Save file as cmp.html, save file within your GRC 175 folder. Find file and double click on file in order to preview in a web browser. As you make changes you can save your file in the text editor (cntrl+s / cmnd+s) and then preview the page in a web browser, if you keep the web browser open you simply need to refresh the browser every time changes are made and saved. Return to the text editor, add a table to your page. Type table tags after the last </p> tag and before the closing </body> A table is made up of an opening and closing table tag, and a table has rows inside the table, and table cells must go inside these rows. <table> <td> Hello world this is my first table </td> </table> Tables help provide structure for displaying content. For example you can place content within a table to help provide a structure for displaying data on a webpage. You will see what we mean in just a second. A table tag creates a box. A table must have a table row and a table cell. 14
represents a table row <td></td> represents a table cell within a row The table cell must go inside the table row. Note: alternatively we could add a table header tag instead of a td (cell) tag. <th></th> this tag must also go within any table row, this tag is optional and would be used instead of the table cell tag <td></td> A table header will bold any content inside this tag. <table> <th> table cell data can go here, it will be bolded </th> </table> Note: Tables can even be put inside other tables, this is known as nesting tables. You DO NOT have to create an example of this. The nested table needs to go inside a table cell. See the example below. Extra spacing is ignored by browser. <table> <td> this is the first table, row 1 cell 1 </td> <td> <table> <td> second table is nested inside the first table, row 1 cell 2 </td> </table> </td> </table> Your code for the cmp.html should now look similar to the example on the next page: 15
<html> <head> <title> first name last name grc 175 project management page </title> </head> <body> <p> project management page grc 175 </p> <p> first name last name </p> <table> <td> Hello world this is my first table </td> </table> </body> </html> Save and preview within a browser When our table is viewed through a web browser there is not much to see since the table has little content and the default (border) setting makes it transparent. We will modify our table and make it more visible next. Add a border to your opening table tag table to make the table more visible, adds a border around the table, add the following inside the opening table tag <table border= "1" > Add an additional column <td></td> must add inside the table row see below <table border= "1" > <td> Row 1 column 1 </td> <td> Row 1 column 2 </td> </table> 16
Add about 3 additional table rows Remember each row has 2 columns, each <td></td> represents a column or cell <td> Row 1 column 1 </td> <td> Row 1 column 2 </td> Next, add some more content in order to make table more visible. For example try adding the word Assignments to the first row first cell. Then try adding the word Bookwork to the first row and second cell. See the example on the next page for help. You table code should look similar to the following If necessary highlight and copy the table code and then paste replacing your existing table code. <table border= "1" > <td>assignments</td> <td>bookwork</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </table> 17
Save and preview page in a web browser. There is one problem, our table is not completely visible and most of our rows will look collapsed since there is no data inside them, we can fix this by adding a non breaking space. Add a non breaking space (blank space) to at least one cell in each row of the table that has no content, this will make our table expand fully. The html tag for a non breaking space is The example below represents only one row inside our table <td> </td> <td> </td> Make sure you have added a non breaking space (blank space) to each of the empty cells You will need to add to at least one cell in each row of the table that has no content. Save and preview page in a web browser. Notice how the table is more visible now Next, we want to add additional table attributes to your table. All the following table attributes within the opening table tag, see example on next page for help. align="center" width="300" cellpadding="10" bgcolor="silver"> Aligns content in table to be centered Defines a width for your table Adds padding in between cells Adds a background color of silver to your table Note: We will learn in the next assignment how to use stylesheets to style our webpages. Stylesheets are the preferred method for formatting a table vs using HTML. We are using the old HTML method in the above example. 18
This is what the opening table tag will need to look like. You can modify size and color to your liking. <table border="1" align="center" width="300" cellpadding="10" bgcolor="silver"> Note: When using/defining color you can use either the approx. sixteen predefined colors or the hexadecimal value. Sixteen predefined colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow Please make sure that you only have one opening table <table> tag!!! Save and preview page in a web browser. Next, add several examples of centered, bold, and italicized text to some text on this webpage. Aligns paragraph text to be centered, add inside any opening paragraph tag. <p align="center">centered paragraph text goes here</p> Bold text <strong>bold text goes here</strong> Italicized text <em>italicized text goes here</em> Note: Do not use <b> or <i> tags, these are not recommended. Use what is shown above, <em> and <strong> On the second row of your table add a hyperlink. Href hyperlink <a href="webpage URL">This is the text for my hyperlink</a> Modify hyperlink to go to contact_me.html which we will create in the next step. 19
Modify hyperlink to look like this: <a href="contact_me.html">a1 Contact Page</a> Save and preview page in a web browser. Note: If you tried to click on the hyperlink it would be unable to open that page since we haven t created yet, we will create soon. See the example below to get an idea what you page should look similar to. The code I used to create my page is shown on the next page. Adding various tags will change the appearance of the page, your page will not have this exact code. 20
<html> <head> <title>adam Valentiner GRC 175 Project management page</title> </head> <body> <p align="center"><strong>project management page GRC 175</strong></p> <p align="center"><strong>adam Valentiner </strong></p> <table align="center" width="300" border="1" cellpadding="10" bgcolor="silver"> <td><em><strong> Assignments </strong></em></td> <td><em><strong> Book work </strong></em></td> <td><a href="contact_me.html">a1 Contact Page</a></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </table> </body> </html> Step 4 Create the contact page (contact_me.html) For the contact page we will be adding some images, several paragraphs, providing contact info, and more. Create a new plain text document. 21
Required tags, copy and paste the following code into notepad. <html> <head> <title> first name last name page description </title> </head> <body> </body> </html> Modify title to your own info. Each web page is required to have a unique title. Next, add a paragraph <p></p> inside the body. The paragraph also provides spacing and a line break around the paragraph. <html> <head> <title> My name goes here Contact page </title> </head> <body> <p></p> </body> </html> Inside the paragraph type three sentences about your hobbies or interests. Next we want to add two images using the img tag. These two image examples will demonstrate the two common ways of linking to an image, relative path and absolute path Add the following inside the current paragraph or create a new paragraph. img <img src="filename"> In order to point to an image replace filename with the local filename of your image (image must be in the same location/folder as your web page) or provide the URL of the image you are linking to (you can link to an image on the web 22
using its URL). Image should end with the.gif,.jpg, or.png file extension. Image file paths are either relative or absolute paths. Absolute filename example: <img src="http://www.cnn.com/beach.jpg"> Relative filename example: <img src="island.jpg"> You must demonstrate both of the file location types, absolute and relative for your two image examples. Go to http://images.google.com in order to find some images. You will need to get the URL for one image in order to have an absolute image and then download a different one. You must use your own URL do not use the example. You will need to copy the address or URL for the absolute example Once you download the image make sure to put inside the website folder where you are saving your files Save and preview in a web browser Next add a border to each of these images: <img src="imagename.jpg" border= "1"> Save and preview in a web browser Optional: resize one of the images using html. Note this may distort the image, unless you maintain the images original aspect ratio. Add a width and height value in pixels or % goes inside the img tag. Note: Only some browsers support % width="200" height="200" or use % width="25%" height="25%" 23
Resized image <img src="imagename.jpg" width="200" height="200" border= "1"> Extra credit, add another image and add a hyperlink around the image. Hyperlinked image <a href="http://www.dogs.com"><img src="images/dogs></a> Next, we will add a background image to the entire webpage. This will add a tiled background image to your webpage. You will need to find an image to use for your background. Find your own image and URL. Add a background property to our opening body tag. Add to your existing opening body tag. Do not add a second opening body tag. Go to http://images.google.com in order to find a bg image. You will need to get the absolute URL. The following are two ways of adding a background image to our page within the existing body tag. Add the following code inside your existing body tag style="background-image: url('url goes here');" The is what it should look similar to but you will need to find your own URL The following is known as a CSS inline style and it is the desired method <body style="background-image: url('http://www.art.com/abc.jpg');" > The old HTML method is not recommended <body background="http://www.nutrocker.co.uk/noise.jpg"> 24
Important note: We will learn in the next assignment more about how to use CSS stylesheets to style our webpages. Stylesheets are the preferred method for adding a background to a webpage vs using HTML. Save and preview page in a web browser Your new page should look similar to the following on the next page: <html> <head> <title> Adam Valentiner HTML aaa page </title> </head> <body background="http://www.nutrocker.co.uk/asd/gold_noise.jpg"> <p>this is the first and my most favorite computer generated beach image I found on the web. <img src=http://oz.irtc.org/ftp/pub/1996-08-31/beach.jpg border= "1">The Island of kauai was my favorite island to visit in Hawaii. Checkout my favorite scenic spot I found. <img src="island.jpg" border= "1"> <p/> </body> </html> Somewhere inside the paragraph add an example of a line break, <br> The <br> tags adds a line break directly after the tag, making the text that follows the tag begin on a new line. If you add the line break right before the image it will put the image on a new line. br (line break) <br> br example: <p>this is the first and my most favorite computer generated beach image I found on the web. <br><img src=http://oz.irtc.org/ftp/pub/1996-08-31/beach.jpg border= "1"></p> Note: The difference between a <p></p> tag and <br> is that a <p> paragraph tag will put a blank line after the paragraph is closed. A <br> is used where you want 25
a simple line break or carriage return, and there will be no extra line spacing. Also notice a <p> tag has an opening and closing tag but a <br> only has one tag, you put the line break tag where you want line break to occur. Save and preview page in a web browser Step 5 Add additional examples of popular html tags Next, somewhere on this page add several examples of centering, bold, and italicized text. For centering do not use <center> the tag is deprecated. For bold and italic do not use <b> or <i> tags, these are deprecated too. Deprecated means do not use any more since they are unsupported and old tags. Use the following tags to center, bold, and italicise Centering text or content inside a paragraph, add to opening tag align="center" Align center example (can use with table also) <p align="center">centered paragraph text goes here</p> Bold text <strong>bold text goes here</strong> Italicized text <em>italicized text goes here</em> Note: HTML tags can be nested inside other tags as long as they are opened and closed in the correct order/sequence. For example: <em><strong>project</strong></em> Save and preview page in a web browser. Next, add a horizontal rule somewhere on your page but not inside a paragraph since it is a stand alone element or a block element. Creates a horizontal line. 26
hr horizontal rule <hr> Add a Headline example somewhere on your page. Make sure to also put outside any paragraphs since it is a block element. Headline tag comes in sizes 1-6, 1 being the largest. Creates a headline with larger text. h1 headline tag <h1>heading 1 text goes here</h1> Somewhere on the page, but not inside a paragraph, add an ordered list with at least three list items of your three favorite things to do <ol> <li>1 st list item text goes here</li> <li>2 nd list item text goes here</li> <li>3 rd list item text goes here</li> </ol> Save and preview page in a web browser Somewhere on the page, add a hyperlink to your favorite website using the HREF tag. Should go inside one of your paragraphs or other block element. <a href="url">name for my hyperlink goes here</a> At the very bottom of your page add a mailto: email hyperlink. Provides a link to an email. Should go inside one of your paragraph or other block elements. <a href="mailto:emailgoeshere@emailname.com">text for email link</a> Note: The mailto: hyperlink only works as intended, opening up a new email with this email address if the viewer has an email program like Outlook installed. It doesn t work as intended, for most people who use web based email. Save and preview page in a web browser 27
Add any additional content as desired. Make sure you have met the minimum requirements. Extra credit, add a table with at least 2 rows and 2 columns somewhere on this page. Cannot go inside a paragraph tag though. We will upload our two pages to our web host account next. Step 6 Upload pages to your web host Next we need to upload your 2 pages and A1 to your web host account Popular Web Hosting Terminology: FTP File Transfer Protocol, an Internet standard for transferring files over the Internet. Web hosting - Web site hosting. Provides the housing, serving, and maintaining files for one or more web sites on a remote web server. Host/Hostname/FTP Host is the address of the web server we will be connecting to where we will upload our web pages/website. Host is sometimes referred to as the FTP address. Host can be a ftp address like ftp.nevada.edu or an IP address such as 99.999.99.99 An ftp or host address cannot begin with ftp:// Username Your unique user account Password Password for your user account A Domain name - name that locates an organization or other entity on the Internet. For example, the domain name. i.e.: photosbyjoe.com Make sure you have opened a web hosting account, we did this in step 1 of this assignment Verify you have the written down following before continuing: ü Hostname/Host/FTP ü Username ü Password 28
For this next step you are going to need access to an ftp program If necessary, download Filezilla Free FTP if your computer doesn t have an FTP program. Computers do not come with ftp programs. Filezilla download URL http://filezilla-project.org/download.php?type=client The CSN Mac lab computers should have Fetch FTP Open Filezilla or Fetch (mac) or similar FTP program The FTP program will allow us to make a remote FTP connection to our remote web server which contains your web host account. Next, we need to setup our login information. Type in your Hostname, Username, and Password Click Connect. If you have problems connecting verify your username and password and the hostname You can contact your web host or check your registration info/email In most, but not all ftp programs the left panel represents our local files on our computer and the right panel represents the remote files on your web host account On the local pane navigate to your local folder where your files are being saved. On the remote pane look to see if there is a public_html folder. If you see a folder with this name double click on this folder to open. All webpage related files must be uploaded into this folder in order for your website to be viewable. Select the files you want to upload Select your local files (index.html, cmp.html, contact_me.html and various image files) then click on Put to send these files to the remote server You will also need to upload any additional files being used like images which need to also be in the grc 175 folder, it is ok to put images inside an images folder as long as your code is linking to the files within the folder 29
Step 7 View and Test your uploaded web pages Next, you will want to view your web address for your web host space and verify all files successfully uploaded. In a web browser, navigate to your sites URL http://yourhostname/~johndoe The index page will display by default in the above example. Note: since the first page of my web site is named index.html then I could have also navigated to the uploaded page by going to: http://yourhostname/~johndoe/index.html Check to make sure that your contact_me.html page also uploaded along with the images on that page http://yourhostname/~johndoe/contact_me.html Check to make sure that A1 link is working and A1 is showing Congratulations! If your web page successfully uploaded, and you are able to view its URL, and the contact_me page and all its images are showing, and there are no problems, then you are ready to have it graded. If your re having problems viewing your index page verify you have uploaded all files into the public_html folder if your web host has a folder with this name inside your web host account. Step 7 Send an email with your website URL to the Instructor After you tested all your pages and links send the Instructor an email with the absolute URL link to your website In the email you must put GRC 175 and your full name in the subject line Extra Credit: If you wish to add more to your pages you can see the cheatsheet at the end of these instructions or go to http://www.w3schools.com/html/html_examples.asp 30
Grading Criteria q q q q 3 pages hand coded, saved as index.html, cmp.html and contact_me.html Provided dif titles for your three main web pages Published pages to your web host account Email instructor with your assignment url by the assignment due date For index.html: q Created a basic web page with some sort of content and unique title For cmp.html: q q q q Created a table with 2 columns and approx 5 rows for the class management page, cmp.html Table provides a link from A1 Contact Page to contact_me.html Added additional table attributes to your table; align, width, cellpadding, bgcolor and border Examples of centered, bold, and italicized text For contact_me.html: q q q q q q q Have another paragraph which provides two examples of the line break Include examples of centered, bold, italic Included two images with borders on your contact page, one image provides an example of a relative link and one provides an example of absolute link Added a horizontal rule somewhere on your page Added an ordered list with three list items Provided a hyperlink to another website Provided a email hyperlink 31
Terms you should now be familiar with: URL Common web file formats: 3 most popular image files.jpg,.gif,.png.html Min required HTML tags to make a webpage Relative vs absolute paths FTP Web hosting Host/Hostname/FTP address (for connecting via FTP) Username and password (host) Domain name Plain text editor index page vs homepage web directory vs folder inside of your webspace, what s the dif? min req. tags for a webpage <html> <head> <title> </title> </head> <body> </body> </html> Popular html tags <a href="url or file location goes here">type a name for the link</a> <img src="image filename location goes here"> <p>paragraph content goes here</p> <br>line break <table> <td>cell 1 row 1 content goes here</td> <td>cell 1 row 2 content goes here</td> </table> 32
HTML cheat sheet sample html tags Creating your first web page using the basic HTML tags HTML tag or tags Purpose Requirements/ Location <html> <head> </head> <body> </body> </html> the required html page tags (tags) must go in this exact order with both opening and closing tags <html> <head> </head> <body> </body> </html> <title>title goes here</title> <p>text goes here</p> adds a title to the top header inside a web browser creates a new paragraph with line spacing around the paragraph must go in between the opening and closing head tags <head></head> must go somewhere in between the opening and closing body tags <body></body> <hr> adds a horizontal rule must go somewhere in between the opening and closing body tags <body></body> <hr size="3"> adds a horizontal rule 3 pixels in height must go somewhere in between the opening and closing body tags <br> <html> <head> <title>adam s first page</title> </head> <body> <p>hello this is my first page</p> <hr/> <hr size="3"> </body> </html> adds a line break, carriage return no extra spacing Basic webpage with various examples, most tags go inside the body except for title goes in the head <body></body> must go somewhere in between the opening and closing body tags <body></body> 33
Enhancing your web page using various attribute tags html tag or tags purpose requirements/ location makes text a heading 1 must go somewhere in between the opening and closing <h1>heading 1 text goes here</h1> size also known as a body tags headline tag <body></body> <em>italicized text goes here</em> <i>italic text goes here</i> (don t use i anymore) <strong>bold text goes here</strong> <b>bold text goes here</b> (don t use b anymore) <font size="1" color="maroon"> text with these size and color attributes goes here </font> we now use stylesheets to style text don t use font tag anymore makes text italic makes text bold adds font attributes size and color to text inside its tags must go somewhere in between the opening and closing body tags <body></body> must go somewhere in between the opening and closing body tags <body></body> must go in the opening font tag <font size="1" color="maroon"> <p align="center"> text with this align attribute goes here </p> adds paragraph align attribute to text inside its tags must go in a opening paragraph tag <p align="center"> <body background="bk.gif"> Best to use CSS stylesheets to add a bg image <body bgcolor="gray"> Best to use CSS stylesheets to add a bgcolor <body topmargin="20" leftmargin="100" rightmargin="100" > Best to use CSS stylesheets to add a body margin <ul> <li>1 st list item text goes here</li> <li>2 nd list item text goes here</li> <li>3 rd list item text goes here</li> </ul> adds a background image to the body of the web page adds a background color to the body of the web page adds body attributes topmargin, leftmargin, and rightmargin to the body of the web page adds an unordered (bulleted) list, each list item <li>list item goes here</li> will have a bullet (ball) next to it must go in the opening body tag <body background="bk.gif"> must go in the opening body tag <body bgcolor="gray" > must go in the opening body tag <body topmargin="20" leftmargin="100" rightmargin="100"> must go somewhere in between the opening and closing body tags <body></body> 34
<ol> <li>1 st list item text goes here</li> <li>2 nd list item text goes here</li> <li>3 rd list item text goes here</li> </ol> adds an ordered (numbered) list, each list item <li>list item goes here</li> will have a number next to it must go somewhere in between the opening and closing body tags <body></body> href, and additional html tags html tag or tags purpose requirements/ location <a href="home.html">home</a> creates a hyperlink must go somewhere in between the opening and closing body tags <body></body> <a href="home.html" title="home">home</a> <a href="mailto:contact@primometro.com">conta ct@primometro.com</a> <img src="http://www.cnn.com/photos/studentsdowntown.jpg"> creates a title for your hyperlink that appears when you mouse over it, not consistent with all browsers inserts a blank single space, used when you want more than one space in html creates a mailto: hyperlink used for hyperlinking to email addresses. opens up a blank compose email message inside the users default email program such as outlook. Not reliable since most people do not use mail programs like outlook inserts a image must go in the opening hyperlink tag <a href="home.html" title="home">home</a> must go somewhere in between the opening and closing body tags <body></body>\ must go somewhere in between the opening and closing body tags <body></body> requires the user to have an email program set up in order to work. must go somewhere in between the opening and closing body tags <body></body> 35
adding tables to provide structure and layout to your page html tag or tags purpose requirements/ location creates a table, tag must go somewhere in between the opening and closing <table></table> requires you to add a table body tags row with a table cell see below <body></body> <td></td> <table> <td> </td> </table> <table border="10"> <table bgcolor="white" bordercolor="silver" cellpadding="5" cellspacing="0"> Best to now use style sheets to style your tables but this is still a common way to style your table <tr bgcolor="silver"> Best to now use style sheets to style your tables but still is common to use this creates a table row inside a table creates a table cell inside a table row an example of a table with one table row and one table cell adds table border attribute to table, will display with an outer border 10 pixels in width. adds table bgcolor, bordercolor, cellpadding, and cellspacing attributes. bgcolor adds a background color. bordercolor adds a border color. cellpadding adds cell padding around the cells. and cellspacing adds cell spacing between cells. adds table row bgcolor attribute must go somewhere in between the opening and closing table tags <table></table> must go in between the opening and closing table row tags a table must have opening and closing table tags. a table row and table cell must also have opening and closing tags. any table cells (table cell opening and closing tags) must go in between the opening and closing table row tags. must go in the opening table tag <table border="10"> must go in the opening table tag <table bgcolor="white" bordercolor="silver" cellpadding="5" cellspacing="0"> must go in the opening table row tag <tr bgcolor="silver"> <th></th> creates a table (cell) heading, that bolds text inside it, use instead of <td></td> must go in between the opening and closing table row tags 36
<table width="100%" > <table bgcolor="black" bordercolor="silver" cellpadding="5" cellspacing="0" border="1"> <tr bgcolor="silver"> <td> this is row 1 cell 1 </td> <td> this is row 1 cell 2 </td> <td> this is row 2 cell 1 </td> <td> this is row 2 cell 2 </td> </table> inserts a table attribute width of 100% an example of a table with two rows with each row having two cells. must go in the opening table tag <table width="100%"> must go somewhere in between the opening and closing body tags <body></body> Best to now use style sheets instead to style your tables, however DW allows tables to be styled using html attributes and still common to style this way using HTML 37