Using Styles and Style Sheets for Design
Part A: Using Styles and Style Sheets for Design
With the sample video accounted for, load one of your web pages into Notepad++. The page you select should be the logical spot for a multimedia element to be displayed; for example, not many Contact pages incorporate diverse media, whereas home pages and product detail pages do.
Choose a location in the selected HTML file for the video to be written into the code. If you want to add one or more <div> tags to carve out a spot for this media, or to reformat your other content to make room, go ahead and do so.
NOTE: You may need to do some testing of your modified page in the available browsers prior to continuing.
Once you have space for your media, begin adding your code. Type the opening video tag with any features and properties you need. Refer to the W3C’s information on the <video> tag if you need, to review the properties and features you can include within the tag.
Now that you have started writing your <video> tag, let’s discuss the VideoSample.jpg file you copied in. Normally when a video loads into a page, you will see a black or white shape where the video is, and no visual cue as to what may be in the video. The <video> tag has a facility to specify a still image that will be shown before the video is played. The VideoSample.jpg image is what will be used as the still image.
Add the poster property to your <video> tag, and specify the VideoSample.jpg image.
Once your opening tag is complete, begin adding the subordinate <source> tags, which call the video files. The sample video included in your course Starter folder comes in two versions. Recall that this is so that there is a backup video option in case a user’s computer is unable to run the video in the other format.
Make sure there are enough <source> tags for the number of video format options available, or that you intend on including. Each <source> tag should have a media type setting that matches the format of the video file being called.
Type in a text-based message as a catch-all for any users who are unable to view the videos at all. Once your message is added, close the <video> tag.
Test your video in all of the available browsers to ensure consistent functioning of the video and its controls, as well as formatting on your page.
Part B:
You have probably seen tables on websites pretty often. If the table wasn’t being used to show large amounts of data in many rows and columns, it was likely used to show a simple comparison between one or more products. Think about the content you wrote in your website document. At any point, did you seek to set up a comparison between two or more things? For the purposes of this lab, we will use a predetermined set of data.
If you do not already have one of your web pages open, load one of them into Notepad++. Be sure that the file you choose is the page best suited for tabular data. If you wish to place tables on more than one page, you can copy the code you write in one file and paste into another later on as the basis for a different table.
In the file you have chosen, find a location in the code to write the code for the table, and add a few blank lines where your table tags will go.
Here is the preset table we will re-create.
This table has a couple special elements, such as a title bar that that spans across all columns and has a colored background. There is also a row of column headers with its own coloring, above two rows of data.
Begin by typing the opening <table> tag. The table should occupy a space that fits with the amount of content it contains, so consider how wide the table needs to be. Since the amount of content is not significant, the height of the table is less of a concern.
With the table declared in code, it is easiest to build the table from the top, and move down. The first element in the table is the title bar. Type the tag for the table head, and add the title text. There are other style elements of this table that need to be implemented, however we will deal with those later on using CSS.
The sample table has 3 rows, each of which must be defined separately so that the table cells can then be created. Type the tag for the row of column headings, and then type the opening and closing tags for each of the five cell divisions in that row.
Once the row and cell division tags have been written, type in the text for each column header into its respective cell division.
Next, do the same for the first and second data rows. Open the row tag, add the opening and closing cell division tags, and then close the row.
Once both rows have been set up with their cell divisions, type in the text items into the appropriate cells.
Save your HTML file, and then open your CSS file. You will now define the styles for the title bar text, title bar, column header text and cells, and data row text.
You can define styles at the tag level, meaning that any time the <table>, <th>, <tr>, or <td> tags are used for a different, they will have the same styles as the one you have just coded. You may run into issues using that strategy, however, since you have cells in the colored column header row, and uncolored cells in the data rows. Thus, defining a style at the <td> level in your CSS file may complicate how you want your table to look.
There are a few ways to style the table and its elements. You can write inline styles within each tag; you can write an internal style sheet with the table styles; or you can add the styles to your CSS file. When writing the styles, think about and select the best method for creating styles that can be applied while not overriding styles applied to other elements.
Refer to the W3C’s CSS3 guide to select table and subordinate element properties to build into your styles. You do not have to exactly mimic the styling applied to the sample table above; you can select row, cell, and text decorations and styles that match your website plan, or come up with your own mix. The key is to experiment with the range of available properties (you do not have to use all of them) and their respective settings.
Save your CSS file, and return to the HTML file. In your table tags, add any class property declarations you need, so that each table tag pulls in the style you have set for it. Save your HTML file once more.
Using the available browsers, test your web page to make sure the table is rendered properly, and that your styles are being applied.
You have successfully built a stylized table with data in HTML. The basic layout of this table can be copied and pasted for any other tables you wish to add to your website, and changing the data is as easy as copying and pasting the content you need over the existing entries.
Part C:
Open the Notepad++ application if you do not already have it open, and load an HTML page from your course directory. The HTML file should be one where you would like to incorporate a web form that will be used by visitors to send inquiries to your school email address.
With your selected HTML file open, find a location in the file where you want the form to appear, and add several blank lines where you will add the code.
NOTE: If you are not sure where to place your form in your website pages, do some research via search engine for “contact us” pages. This will return results that allow you to see what other designers are doing and have done with simple web forms.
The following is the basic form you will recreate in your code.
Type the opening tag for your form. Like the <table> tag, the <form> tag has subordinate tags; the opening and closing <form> tags define the code space in which those subordinate tags are declared and configured. Content within the <form> tag is displayed inline, left-to-right, top-to-bottom, just like any other tag. This means that each text title you see in the above example would be entered into the code before typing the tags for each field.
Inside the opening form tag, type “Name: “. Then, type the <input> tag for the first text field. Consult the W3C’s web pages on HTML forms if you need to review the tags and their properties. Give this first <input> field an identification that denotes that the field’s data is/is used for. Also specify a maximum horizontal length for the field. When you have typed the <input> field code, add two <br /> line break tags at the end, and press Enter.
Now, type “Email: ” and add the second field for users to type in their email address. Make sure the Email field has a maximum horizontal length and has an appropriate identification. Add two <br /> line break tags at the end and press Enter.
Repeat the process again for the Message field, however this time you will also have to configure the property that controls the number of lines and/or characters users can type into this field. Finish this code line with two <br /> line break tags and press Enter.
The last form element to add is the Submit button. Button form elements can be more complex since they are intended to perform a function once they are clicked. This often means that additional code is involved that we may not be familiar with already.
As we have alluded to in this portion of the lab, adding forms to a web page is a bit more complicated than simply typing in <form> and <input> tags. The form and its fields have to be tied to some code on the server side in order to function. Hypertext Preprocessor code, also known as PHP, is what can be used to process the data that users put into your form fields. Your web page(s) must refer to a PHP script on the server side of your website’s Internet service. When a user clicks the Submit button in this lab’s example, a request is sent to the specified PHP file. While the topics of web servers and PHP are important in web design and development, they are a bit beyond the scope of this course. The virtual lab environment has been set up so that a local web server is already running, and a PHP file already placed so that you can test your form in a browser. In the real world, it is possible your web server may be off-site only accessible through the Internet, where you must add script files and administer the server from afar.
Let’s go back to your opening <form> tag. Because you need the Submit button to perform an action, you need to specify that property for the form. The action property will call the name of the PHP file placed within the local web server mentioned in the last step. In your opening <form> tag, type the following code: action=”http://localhost/emailscript.php”
Another element we want to add is the target attribute, which will load the result of your processed form into a separate browser window. Type the code target=”_blank”. You must also specify the method for processing the information a user enters in your form. For this example, type the GET method into your <form> tag: method=”GET”
Save your file.
Your form is now set up. Save your HTML file, and test it in one of the available browsers. Enter your own information into the fields to see if you receive messages from your web page’s form. When you click your Submit button, the browser will throw a security warning; choose to proceed, as you trust your own code on these pages, and there are no incoming insecure links from the outside during testing. The browser should then load email.php into a separate window, where you see the names of each field, along with the text you typed into each one.
