Embed Size (px)
Citation preview
JMD2144 – Lesson 4Web Design & New Media
Here’s what you’re buildingYou’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 powerUnder 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
InstructionsOpen up a new HTML documentPut your name between the
<title> tagsPut a picture of yourself (or
anything else) between the <body> tags
A bit about youGreat! Now we know your name and
what you look like, but that’s about itYour 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 sectionsNice … It’s starting to look like a profile
page alreadyMost 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 fontPerfect. 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 - IntroductionOur 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 fontNow we’ll cover some important
structural aspects of HTML: <table>, <div> and <span>
Let’s recap a bitType this code<!DOCTYPE html><html>
<head><title>Table Time</title>
</head><body>
<h1>Tables Are Mega Sweet</h1>
</body></html>
Then do thisMake the heading have the font
ArialAdd 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 informationA table is just a bunch of information
arranged in rows and columnsWe 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> <tr> </tr> <tr> </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 thisIn 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 getBasically, you can see we have 1
column with 3 rows, and each row contains exactly one cell
Add a second columnIt 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> <tr> <td>Dracula</td> </tr> <tr> <td>Bride of Frankenstein</td> </tr> </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!
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 tableUse the table we made earlierTo 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>. It holds the heading for each column
You add text to a <thead> similar to a <tbody>, like this:
<thead> <tr> <th> Name </th> <th> Favorite Color </th> </tr></thead>
Naming your tableThe table is missing a titleWe want to add a title row that goes
all the way across the topWe need to use colspan attribute for
the <th> tagBy 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> </tr>
</thead> <tbody> <tr> <td style="padding:5px;">King Kong</td> <td style="padding:5px;border-left:1px solid black;">1933</td> </tr> <tr> <td style="padding:5px;">Dracula</td> <td style="padding:5px;border-left:1px solid black;">1897</td> </tr> <tr> <td style="padding:5px;">Bride of Frankenstein</td> <td style="padding:5px;border-left:1px solid black;">1944</td> </tr> </tbody> </table> </body></html>
End of Lesson 4See you next week
