- a Table Row - a Table Data Cell
Tables
•
• • • • • • • • •
| Row 1, Cell 1 | Row 1, Cell 2 | | Row 2, Cell 1 | Row 2, Cell 2 |
Tables
• Tables have three unique attributes
– – – Table Borders Cell Padding Cell Spacing
Table with no border
•
• • • • • • • • •
| Row 1, Cell 1 | Row 1, Cell 2 | | Row 2, Cell 1 | Row 2, Cell 2 |
Table with more cell padding
•
• •
• • • • • • •
| Row 1, Cell 1 |
Row 1, Cell 2 | | Row 2, Cell 1 | Row 2, Cell 2 |
Table with more cell spacing
•
• •
• • • • • • •
| Row 1, Cell 1 |
Row 1, Cell 2 | | Row 2, Cell 1 | Row 2, Cell 2 |
More with Cells
•
• •
• • • • • •
| Spans 2 Columns |
| One Column Each | One Column Each |
More with Cells
•
• •
• • • • • •
| Spans 2 Rows |
One Row Each | | One Row Each |
Pictures
• Pictures are added with the ![]() tag
• • •
The location of the picture file goes in the src (source) attribute The location can be relative, just like in a hyperlink The ![]() tag doesn't have a closing tag!
Images
• 
Pictures
• • Pictures can be moved to the left, center and right Pictures can have a description called Alt text, viewable when your mouse hovers over the picture Pictures can be hyperlinks
•
•
Pictures can be resized
Aligning Pictures
• •
• • •
This is  the default.
Picture aligned in middle Picture aligned at top
• • •
•
Aligning Pictures
•
•
 The picture is left of everything written.
The picture is right of everything written.
• • •
•
More on Pictures
• Alt text is text you can read when your mouse hovers over an image. The text belongs to the alt attribute. Images can be made into hyperlinks the way text is.
• • •
Resizing an image
•
• •
• •
The width and height are written in pixels.
• •
•
Be sure to look at your images on several computers.
Warning
• • Resizing an image doesn't change the file size, only how large it looks on the screen This means a very big picture resized to very small will still take a long time to load
•
If you want a very small and very large version of a picture, it's usually better to have two different picture files
Background Colors
• Background color is set with the bgcolor attribute in the body tag
Background Color
•
• • •
• • •
This website has a light blue background
Color Codes
• About 150 colors have names
• • • •
Most colors do not (There are over 16 million possible colors!) Instead, they have Hexadecimal values For instance, #F0E68C = Khaki There is a link at the end of the tutorial to the list of 150 color names
Color Codes
• Colors are made of Red, Green and Blue
• •
Each of the six characters goes from 0-9, then A-F. This is equivalent to going from 0-15. The first two characters determine the amount of Red, the next two determine the amount of Green, and the last two determine the amount of Blue
To understand this, try different numbers with the bgcolor attribute (00FF00, 22AA90, etc).
•
Background Images
Background images are set with the background attribute to the body tag
Background Image
•
• •
This page has clouds in the background. The image is small and repeating.
• •
Background Images
• • If an image is smaller than the page, it will repeat Do not use backgrounds that conflict with your text! Make sure you can read the website text.
Background in Tables
The bgcolor and background attributes are valid in the , and tags
Table Background
• •
• •
• •
| lalalala | lalalala |
• •
• • •
| lalalala | lalalala |
| lalalala |
•
• •
lalalala |
Designing A Good Website
Purpose
A website has a purpose. For instance, a personal website tells the world about a person.
Purpose
Each page has a purpose. For instance, one page on a personal website might show a project a person did.
Clutter
An example of a poor web page is one with too much stuff!
Front Page
The front page should say what the purpose of the website is.
Navigation
The front page and probably every page should have navigation – links to the other pages
Navigation
Good navigation means that someone can find pages easily, and knows where pages are on the site
Example: Good Page
Example: Bad Page
Title, Navigation, Body
A clear page has these three things.
Site Map
The best way to organize your website is to determine how the pages are related. Do they fit into categories? List out every page and determine how they are related. This will make it easy to make good menus and effective pages.
Page Layout
• • • There are two ways to arrange the layout of a page. CSS – This is an advanced set of techniques which we will not discuss here Tables!
Formatting with Tables
• Tables can stretch across an entire page
• • •
They can have invisible borders HTML code can be nested in cells Each cell can even have its own background color
Table Size
• • In order to set the size of a table, use the width and height attributes in the table tag. A width of 100% will stretch across the entire page hoizontally, and a height of 100% will do the same vertically
Table
•
|
• •
• • • • • • •
lalalalalala | blahblahblah |
How to make a Top and Left Menu
• | Top Bar |
• •
• • •
• • •
| Left Bar |
Body |
Making Menus
• • In the previous example, we made a top and a left bar. Try making a bottom and a right bar. You can add more cells to a “bar” cell, put text in the cells, and make the text hyperlinks
• •
You can also put a table inside of a table A table, row or cell can have a fixed size. Instead of entering a percent, write the width or height as just a number. This will be the length in pixels.
HTML in Table Cells
• • Remember that Tables and Cells can have their own background colors You can also add any html inside of a cell
•
This means you can have paragraphs, images and hyperlinks, formatted and aligned within each cell A menu is just a list of hyperlinks!
•
Indenting Your Code
Every time you nest one tag in another, you should indent! Organized code is very important. It makes it easy to change and fix.
Good Code
Fonts
• • Fonts, Font Size and Font Color are edited with a special attribute called a style Let's look at some examples
Set Font
• • A heading
• • • •
A paragraph
Set Font Size
• • A heading
• • • •
A paragraph
Set Font Color
• • A heading
• • • •
A paragraph
All Three
• This is a paragraph with some text in it.
• •
Head – Website Title and More
• • An HTML Document contains all of its visible content (text and pictures) in the tags. All other HTML goes in the tag, which should be placed above the tag.
• •
The website title is written in the head, with the title tag. This is the text at the top of your browser.
Title
• • • • TITLE title TITLE title!!!
• •
Text text text!
•
•
Overview
• • A web page is written in HTML, which is interpreted by a browser. A website is a collection of web pages in the same directory, connected with hyperlinks
•
HTML tags can be used to format the text, make hyperlinks, add pictures, set background colors, make tables and lists, align text and design layout
A good page has a title, navigation and body.
•
Advanced
Here some advanced concepts are briefly introduced. Further information can be found at www.w3schools.com.
Metatags
• The head of a document contains general information about the document – meta information This includes the title, and more, such as the description and keywords The title and description are what show up in search engines like Google. The keywords help search engines categorize your website.
• • •
Metatags Example
Styles and CSS
• • We used “styles” to set the font, font size and font color Styles are like tag attributes, but more advanced and more powerful
• •
A style is a custom attribute which can do many formatting tasks You can make your own attributes using styles
Cascading Style Sheets
• • Most websites today are made with Cascading Style Sheets (CSS) A Style Sheet is a document which only contains style declarations, like the one in the previous example A style sheet might be called styles.css
•
• •
Every web page would refer to a style sheet This way, every page can share the same styles and look, without writing the code repeatedly.
Styles and CSS
• For more about styles and CSS, see the CSS tutorial at w3schools
Forms and Fields
• With HTML, you can make forms and fields – areas on your website where anyone can write text
A Form
Forms and Fields
• Forms are most useful when combined with a language like Javascript
Javascript
• HTML is a Mark-Up Language. It tells a browser how to display a web page, and then does nothing. Pages are static and unchanging.
•
•
Javascript is a scripting language for adding dynamic, changing aspects to a web page.
Javascript can be written inside of an HTML document
Javascript
• Javascript can be used to do the following and more:
– Process forms and output text (e.g. online quizzes and pop-ups)
– – – –
Respond to mouse location and movements Make pull-down menus Do any calculation or processing with any user input (text and mouse actions) Trigger events – tell a movie or sound to play, display or hide text, change the background etc.
To Learn More
To learn a lot more about HTML and web design, go to www.w3schools.com. They have a very detailed tutorial and examples with which you can play.
What To Do Next
The best way to learn HTML is to play around with it and try out different tags. Then design your website on paper and figure out how to make it with code.
Happy Website Building!
| |