Let’s build our new web page Step # 1 Type in your editor the following lines of code: Page Title Here! Open your .html file in a Web Browser  [ Double-click on the file in explorer or launch from notepad++ ]  Your page should be blank but you will have a page title Change the page title to “Weyland-Yutani Employee Data”   Remember, every time you make a change that you want to see, you'll need to save the file and refresh the Web Browser. Step # 3 HTML5 uses semantic elements to group content on a web page.  Some examples of these are , , , , and .  These semantic elements allow us to label certain types of information on our pages for later use with styles to separate content from presentation.  It may sound a little confusing now but we’ll be working with styles in the next lab and it will make more sense then.  Even though we’re not working with styles yet it’s important to build our page so that we can apply styles later.  Let’s add some more code to our page to create the header section.  Insert the code below                                     Employee Details               What happened?  Why is there a funny little square above the “Employee Details” line?  To troubleshoot, look at the line of code above the one that works.  In this case it’s the line. This line of code is supposed to display a picture but it’s not working.  Remember that the images were placed in the images subdirectory.  Since these are below the level of the html file we need to give the relative path in html code. Change the image line to the following        Step # 4   Tables allow us to create structure for displaying data much in the same way as spreadsheets organize information.  Tables are made up of rows and columns.  Each individual field is a cell.  The best way to work with tables is to design one on paper first.  Figure out how many rows and columns you need.    The tag to open and close a table is simply .  Inside of the table you create rows with the tags and individual cells in a row are created with .  Below we will create an HTML5 section for an employee record and create a table with 4 rows and 3 columns.  Enter the code as it’s displayed below.                                                                                                                             Name:                                     Ellen Ripley                                                                                     Position:                                     Pilot                                                                                       Date of Birth:                                     January 7, 2092                                                                                     Status:                                     Cloned                                         What do you see?   Things don’t seem to be lining up!  You should notice that the first row has 3 columns and the remaining rows only have 2.  We could fix this by adding an empty cell for the remaining rows but that still wouldn’t look right.  What we want is to have the photo take up the entire first 4 rows in the first column.  The tag to do this is called rowspan.  Find the command for the cell containing the photo and change it to the following.           Step # 5     Employee2: Image filename:          Hudson.jpg Name:                         PFC William Hudson Position:                     Colonial Marine Corps Date of Birth:              November 23, 2103 Status:             KIA   Employee3: Image filename:          skippy.jpg Name:                         Skippy Position:                     Party Crasher Date of Birth:              August 4, 2169 Status:             Active and Cranky   Step # 6    Enter the following code and change “Bishop” to your last name  Notice the attribute “target=_blank” that is used on the link.  This causes the destination page to be opened in a new tab or window.                                       Xenopedia  |  Weyland Industries                         Webpage built by Student Bishop - CSCC ITST 1101                         HTML File Screen Print [screenshot] of your web Page. (LAST TWO PICS)

Let’s build our new web page

Step # 1

Type in your editor the following lines of code:

<!DOCTYPE html>

<html>

<head>

<title>Page Title Here! </title>

</head>

<body>

Open your .html file in a Web Browser  [ Double-click on the file in explorer or launch from notepad++ ]  Your page should be blank but you will have a page title

Change the page title to “Weyland-Yutani Employee Data”

Remember, every time you make a change that you want to see, you'll need to save the file and refresh the Web Browser.

Step # 3

HTML5 uses semantic elements to group content on a web page.  Some examples of these are <header>, <footer>, <nav>, <section>, and <article>.  These semantic elements allow us to label certain types of information on our pages for later use with styles to separate content from presentation.  It may sound a little confusing now but we’ll be working with styles in the next lab and it will make more sense then.  Even though we’re not working with styles yet it’s important to build our page so that we can apply styles later.  Let’s add some more code to our page to create the header section.  Insert the code below

<header>

            <!-- our page header and logo go in here -->

            <img src="weyland_logo.png"> <br><br>

            <h1>Employee Details</h1>

            <hr width= 80% >

</header>

What happened?  Why is there a funny little square above the “Employee Details” line?  To troubleshoot, look at the line of code above the one that works.  In this case it’s the <img src=”weyland_logo.png”> line.

This line of code is supposed to display a picture but it’s not working.  Remember that the images were placed in the images subdirectory.  Since these are below the level of the html file we need to give the relative path in html code.

Change the image line to the following

<img src="images/weyland_logo.png"><br><br>

 Step # 4

Tables allow us to create structure for displaying data much in the same way as spreadsheets organize information.  Tables are made up of rows and columns.  Each individual field is a cell.  The best way to work with tables is to design one on paper first.  Figure out how many rows and columns you need. 

The tag to open and close a table is simply <table></table>.  Inside of the table you create rows with the <tr></tr> tags and individual cells in a row are created with <td></td>.  Below we will create an HTML5 section for an employee record and create a table with 4 rows and 3 columns.  Enter the code as it’s displayed below.

<section>

            <!-- This section holds our first employee data -->

            <table width = 80% border=1 align="center">

                        <tr>

                                    <td width=110 align="center">

<img src="images/ripley.jpg"></td>

                                    <td width=100>Name:</td>

                                    <td>Ellen Ripley</td>

                        </tr>

                        <tr>

                                    <td>Position:</td>

                                    <td>Pilot</td>

                        </tr>

                        <tr>

                                    <td>Date of Birth:</td>

                                    <td>January 7, 2092</td>

                        </tr>

                        <tr>

                                    <td>Status:</td>

                                    <td>Cloned</td>

                        </tr>

            </table>

</section>

  What do you see?

Things don’t seem to be lining up!  You should notice that the first row has 3 columns and the remaining rows only have 2.  We could fix this by adding an empty cell for the remaining rows but that still wouldn’t look right.  What we want is to have the photo take up the entire first 4 rows in the first column.  The tag to do this is called rowspan.  Find the <td> command for the cell containing the photo and change it to the following.

<td width=110 align=”center” rowspan=4> 

Step # 5

Employee2:

Image filename:          Hudson.jpg

Name:                         PFC William Hudson

Position:                     Colonial Marine Corps

Date of Birth:              November 23, 2103

Status:             KIA

Employee3:

Image filename:          skippy.jpg

Name:                         Skippy

Position:                     Party Crasher

Date of Birth:              August 4, 2169

Status:             Active and Cranky

Step # 6

 Enter the following code and change “Bishop” to your last name  Notice the attribute “target=_blank” that is used on the link.  This causes the destination page to be opened in a new tab or window.

<br><br>

<footer>

            <!-- The footer will hold links to other pages -->

            <hr width= 80% >

            <a href="http://avp.wikia.com/">Xenopedia</a>  | 

<a href="https://www.weylandindustries.com/" target = "_blank">

Weyland Industries</a>

            <br>

            Webpage built by Student Bishop - CSCC ITST 1101

            <br>

</footer>

</body>

</html>

• HTML File
• Screen Print [screenshot] of your web Page.

(LAST TWO PICS)