JMD2144 – Lesson 4 Web Design & New Media
Here’s what you’re building You’ll start to see a pattern with these HTML projects: first we’ll show you what you’ll be making, then we’ll walk you through actually making it! You’ll be creating your own social networking profile. Check out the profile for King Kong by clicking on the link from this url: http://www.faudzi.com/wdnm
You have the power Under fancy skin, a social networking profile is just a list of text, images, and links. And you know all about those! We’ve set up your profile page with the basics, but the details are up to you First off, let’s make this page about YOU
Instructions Open up a new HTML document Put your name between the <title> tags Put a picture of yourself (or anything else) between the <body> tags
A bit about you Great! Now we know your name and what you look like, but that’s about it Your profile page should include a little big about you! So, create a paragraph below your picture that mentions your age, gender, and hometown. Don’t get carried away – we will get to your interests, favorite things, and where you’ve lived, worked or gone to school in the next section …
Profile sections Nice … It’s starting to look like a profile page already Most profile pages are divided up into sections: your interests, favorite quotes, where you work, where you went to school, where you live, and so on. We can do this with an unordered list! Below the paragraph about yourself, create an unordered list. Each list item should be a category: for example, Interests, Jobs, Favorite Quotes, Where I’ve Lived, and so on
Now that you have your profile sections set up, it’s time to add in your favorite things (and others according to the sections) Try to use nested list in your page Try to use both unordered and ordered list
Fancy up your font Perfect. Your profile’s really coming along! It still looks a bit bland, though. Thankfully, you know how to fancify your fonts with the font-family, font-size and color properties! Which is exactly what you’re about to do Spice up your profile with different fonts, sizes and colors. You can do any combination you like, so long as you use font-family, font-size and color at least once each Bold and italicize some items in your list
HTML Basics III - Introduction Our HTML journey has been progressing very nicely. We’ve covered how to set up the skeleton of an HTML file headings, paragraphs, images and links font colors, sizes, and types background colors, aligning text, bolding and italicizing font Now we’ll cover some important structural aspects of HTML: <table>, <div> and <span>
Let’s recap a bit Type this code <!DOCTYPE html> <html> <head> <title>Table Time</title> </head> <body> <h1>Tables Are Mega Sweet</h1> </body> </html>
Then do this Make the heading have the font Arial Add an image! Add a second image which is clickable and links to a site
What are tables? Tables are very useful. We use them to store tabular data so it is easy to read! When you want to present information neatly in a table with rows and columns – you guessed it – the <table> tag is what you need There are many tags associated with tables, but it all starts with the <table> tag, so let’s add that first
Write a skeleton HTML document, and then … Add an opening and closing set of <table> tags to the body of this HTML document At the moment, if you run the code, nothing happens because you need to populate the table with data
Rows of information A table is just a bunch of information arranged in rows and columns We use the <tr> tag to create a table row. We’ll learn how to create columns shortly, and everything will start to come together Columns are ‘not created’ in <tables>; instead, you tell each row how many cells to have, and that determines your number of columns
How would you add two more rows in this table? <html> <head> <title>Table Time</title> </head> <body> <table> <tr></tr> <!– this creates a row --> <!-- Add two more rows below this! --> </table> </body> </html>
A single column (only the body section is shown) <body> <table border="1px"> <tr> <td>One</td> </tr> </table> </body>
Can you tell that there are still three rows after you run the code? We’ve added a single <td> (“table data”) cell to the first row, essentially creating a single column If you view the result, you’ll see that there’s a border drawn around it (it looks ugly, though)
Now do this In the second row, add a table data (<td></td>) cell and type Two between the tags In the third row, add another cell with Three between the tags Run it and see what you will get Basically, you can see we have 1 column with 3 rows, and each row contains exactly one cell
Add a second column It may not have seemed like much, but you just created a single-column table in the last exercise. Nice work! Now take a look at what we have in the next slide … (only the <body> is shown)
<body> <table border="1px"> <tr> <td>King Kong</td> <td>1933</td> </tr> <td>Dracula</td> <td>Bride of Frankenstein</td> </table> </body>
Notice in the first table row we now have two table data cells Adding a second table data cell has the effect of adding a second table column, although if you see the results, it may look funny because only the first row has two cells (don’t believe me? Run it in an Internet browser) Let’s fix that!
Sweet! We now have a basic table Add a <td> tag to the second <tr> tag with the value 1897, like this: <td>1897</td> Add a <td> tag to the third <tr> tag with the value of 1935 Run the code. We now have a total of 2 columns and 3 rows, and each row has 2 cells Sweet! We now have a basic table
Let’s make it better – Head of the table Use the table we made earlier To make our table look a little more like a table, we’ll use the <thead> and <tbody> tags. These go within the <table> tag and stand for table head and table body, respectively The <head> HTML tag contains information about a web page (e.g. its title) and the <body> tag contains the contents of the web page
In the same way, <thead> tag can be thought of as containing information about a table <tbody> tag contains the actual tabular data <tbody> should be place BEFORE the first <tr>, and ends </tbody> AFTER the LAST </tr>
<thead> should be place BEFORE the <tbody> <thead> should be place BEFORE the <tbody>. It holds the heading for each column You add text to a <thead> similar to a <tbody>, like this: <thead> <tr> <th> Name </th> Favorite Color </tr> </thead>
Naming your table The table is missing a title We want to add a title row that goes all the way across the top We need to use colspan attribute for the <th> tag By default, table cells take up 1 column – if we want a table cell to take up the space of 3 columns, we set colspan attribute to 3 <th colspan=“3”>3 columns across!</th>
Type this code, run it and see the results <html> <head> <title>Table Time</title> </head> <body> <table style="border-collapse:collapse;"> <thead> <tr> <th colspan="2" style="color:red;">Famous Monsters by Birth Year</th> </tr> <tr style="border-bottom:1px solid black;"> <th style="padding:5px;"><em>Famous Monster</em></th> <th style="padding:5px;border-left:1px solid black;"><em>Birth Year</em></th> </thead> <tbody> <td style="padding:5px;">King Kong</td> <td style="padding:5px;border-left:1px solid black;">1933</td> <td style="padding:5px;">Dracula</td> <td style="padding:5px;border-left:1px solid black;">1897</td> <td style="padding:5px;">Bride of Frankenstein</td> <td style="padding:5px;border-left:1px solid black;">1944</td> </tbody> </table> </body> </html>
End of Lesson 4 See you next week