WEBSITE DESIGN
A TUTORIAL FOR THE MESA DAY WEB DESIGN COMPETITION
Table of Contents
• • • • • • • • What is a Web Page Make a Simple Web Page Define HTML How to use this tutorial Basic Tags Attributes Hyperlinks Organizing: Lists and Tables • Pictures • Background Colors or Images • Designing a Good Website • Formatting with Tables • "Good" Code • Fonts • Head - Website Title and More • Review • Metatags
What Is A Web Page?
• • A Web Browser is a program like Firefox, Internet Explorer or Safari A Web Page is a document you view in a web browser.
• • •
Web Pages can have many different fonts, layouts, pictures, links and more. All of this is described in a language your browser can read – HTML A Web Page is written in HTML code
A Simple Web Page
Here we will make a simple web page.
Don't worry yet about what the code means.
Make a new text file
Write this code
HELLO WORLD!
Save as helloworld.html
Open the file in a web browser
What about Macs?
• • On a PC, a text file can be edited with Notepad or Wordpad On a Mac, use TextEdit. This can be found in the Applications folder.
•
Do not use Microsoft Word! Word will add a lot of its own code into your code, which will make it unreadable to browsers.
HTML
HTML – Hyper Text Markup Language
You take text, and Mark it Up with “Tags” Tags look like this: TEXT opens the tag, and closes it.
For instance, Hello World will write “Hello World”, but the word Hello will be big.
What can HTML Do?
HTML can set the way text looks
HTML can insert pictures HTML can organize where things are on a page HTML can link one page to another page
And a lot more!
What Is A Website?
•
•
A website is a collection of web pages
Web pages are connected with hyperlinks
•
A hyperlink is text or a picture that takes you to a different web page or website when you click on it.
Why should there be many pages?
• • Each web page has a specific purpose On a recipe website, desert recipes might be on one page, breakfast recipes on another page, and a place for readers to suggest new recipes on a third page.
Files and Folders
• A web page always ends in .html
• •
The main page or home page should always be called index.html If you go to www.mywebsite.com you are really viewing the file www.mywebsite.com/index.html For one website, keep all of your web pages in the same folder
•
A Website Folder
How To Use This Tutorial
• Make a new html file, and give it a new name.
• •
Copy the code from our first example into the new file. Try out all of the HTML code you are about to learn – put it in your html document, save the file, and view it in your browser. Play around with the code!
•
Essential HTML
Tags
• Always remember to close your tags!
• • • •
This means for every , end with a . If your page doesn't look right, you probably forgot to close a tag, or wrote \ instead of / . HTML code is always inside of an html tag. Everything visible on a web page is inside of the body tag.
Our First Example
HELLO WORLD!
Basic Tags
Heading Tag
• • Five Different Sizes for headings Blah
• • •
•
Blah Blah Blah
Blah
Bold and Italic
• Normal Text
• • •
Bold Text Normal Text Italic Text
Nesting Tags
• You can have tags within tags:
• • •
Bold and Italic Always close the last tag you started first! This will not work right!!
Separating Paragraphs
• Paragraphs can be separated with the paragraph tag Paragraph One Paragraph One Paragraph Two Paragraph Two
• •
Separating Paragraphs
• • You can add extra lines of space using the Line Break Tag . You can add a separator with the Horizontal Rule tag .
•
and don't have closing tags! This is very unusual in HTML. See what we mean in this example.
and
• Here is text separated with line breaks.
•
•
It's a good idea to write these tags on new lines like this
•
•
For organized code
You must use Tags for new lines!
• Adding extra
• • •
•
Lines in our code Without tags Doesn't
Do
•
Anything!
Separating Paragraphs
• You can also separate a large quote with the Blockquote tag • Text text
• Quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote
• Text Text
Blockquote Output
Text Formatting Tags
Bold
Big Strong Small Italic
Emphasized
Text Formatting Tags
• Text Subscript Text Superscript Insert (Underline) Delete
•
• •
Fonts
We will talk about Fonts, Font Size and Font Color later when we introduce styles
Attributes
• • Attributes are extra instructions you can give to tags An example is align:
• • •
This paragraph will be centered. Align can take values of“left”, “center”, or “right” Paragraph and Heading tags both take align
Hyperlinks
• Hyperlinks connect one web page to another
• •
Hyperlinks can also link to other file types and email addresses There are Three kinds of hyperlinks:
– – – Absolute Relative Named
•
The hyperlink tag is and it requires an attribute, the link location. This is called href.
Absolute Hyperlinks
• Click here to go to the MESA website.
Relative Hyperlinks
• When you are linking to another page which is in the same folder as your current page, you can just write the page's file name as the location.
Relative Hyperlinks
• Page One Page Two Page Three
•
•
Named Hyperlinks
• • You can link to a specific location or line in a page You can also link to different lines on the current page
•
This requires two tags: One at the link, one at the destination.
Named Hyperlinks
• • The page with the hyperlink might look like this: See Page 1, Section 2 here
• • • •
This will only work if this is in page1.html: Here is Section 2 To link to parts of the current page, just do this: Go to the top of the page
Email and Files
• • To link to an email address, write “mailto:” and then the email address as the location Email Vegeta
• •
To link to a file, just write the file name as the location Here is my Final Project.
What Have We Learned So Far?
• How HTML tags work
• • •
•
How to format text Different ways to separate text How to make links
Before moving on, be sure you are comfortable with these concepts – play with the code!
Organizing Information
• Two useful ways of organizing things is with lists and tables
Lists
• There are two kinds of lists: Ordered and Unordered
Unordered Lists
• • • • • • • • • • • Sparrow Eagle Raven
Ordered List
• • • • • • • • • • • Sparrow Eagle Raven
List Attributes
• • An unordered list may be marked with discs, circles (“circle”) or squares (“square”) An ordered list may be marked with Numbers, Uppercase and Lowercase Letters (“A” and “a”), Uppercase and Lowercase Roman Numerals (“I” and “i”) The attribute is called “type”.
• •
Nested Lists
• You can put a list inside of a list
Nested Lists
•
• • • • • • • • • •
Rock Punk Post-Rock Classical Baroque Post-Romantic
Tables
This is a table
Tables
• Each box in a table is called a cell
•
A Table is made with three nested tags
– – – - 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!