Web Design Class Day 3 – MHS Web Design

Is this really the world’s worst website?

3. Wireframes

Creating a wireframe of a website is an important first step to help organize the content for a webpage.

There are many ways to create wireframes. You can simply sketch one out using a pencil and paper or can use an online tool (either free or not so free). There are many choices and it is up to the individual web designer.

A wireframe is just a basic rough sketch of what a page will look like and includes things like placeholders for images, logos, text, headlines, links, and menus.

Wirify provides a good illustration of a typical wireframe. To use, drag the Wirify link to your bookmarks bar, go to another webpage, click the Wirify link, and check out a “wireframed” version of the website.

4. Mozilla Thimble exercises

Before we start building a webpage from scratch, let’s try some fun examples to get you used to looking at and editing website code:

Create your own comic- https://thimble.webmaker.org/project/3995/remix

This day in history- https://thimble.webmaker.org/project/3993/remix

Create a poster- https://thimble.webmaker.org/project/1295/remix

My movie poster- https://thimble.webmaker.org/project/1294/remix

Postcard for a friend- https://thimble.webmaker.org/project/1291/remix

Dancing cats- https://thimble.webmaker.org/en-US/projects/bakery/edit

Ugly 90′s page- https://thimble.webmaker.org/en-US/projects/stuck/edit

Make own meme- https://thimble.webmaker.org/en-US/projects/meme/edit

Save the bunny- https://thimble.webmaker.org/en-US/projects/bunnies/edit

Zombies- https://thimble.webmaker.org/en-US/projects/zombies/edit

Online tutorial- https://thimble.webmaker.org/en-US/projects/webstructable/edit

Sports channel- https://thimble.webmaker.org/en-US/projects/s2r/edit

5. Starting from scratch

We are going to create a webpage from scratch today.

We will use Notepad++ as our code editor and will preview our webpage in Firefox.

Webpages are created using HTML and CSS. HTML and CSS tell a browser, like Chrome or Firefox, how a webpage should look and how to display its content.

Let’s just code:

Open up Notepad++

Copy and paste the following. Please note: you must delete any quotation marks from what you paste and add them again.

<! DOCTYPE HTML>

<head>

<title>This is your page title</title>

</head>

<body>

All visible content goes here.

</body>

</html>

Save as index.html

Open up Firefox

Click Firefox in top left, go to New Tab, Open File, then browse for index.html and open it. You are opening your webpage in the browser to preview how it looks.

It doesn’t look like much but it’s a start!

What is all of this??

<!DOCTYPE HTML>

This is always the very first thing in a webpage. It basically tells the browser what version of the markup language the page is written in. This is critical and necessary so the browser will display the webpage correctly. The above code is for HTML5.

More info: http://www.w3schools.com/html/html_doctype.asp

This is the very first and very last html tag your webpage will have. It’s basically telling the browser this is an HTML document and should be read accordingly. <html> is your very first tag and </html> is your very last tag. All of your content MUST be between these two tags or it will not display correctly.

The head tag generally contains information that will not be visible on your webpage, with the exception of the title, which appears in the very top of your browser.

The title tag is where the title of your website goes. For example: MHS Web Design on this website.

You will see this in the very top area of your browser window or tab.

These two tags are very important and will be close to your first and last tags, the <html></html> tags. Everything that is visible will be in the <body></body> section.

Basic HTML tags

Most HTML tags come in pairs:

<p></p> Paragraph tags. Example:

<p>The Medford Public Schools is a caring educational partnership of school, family and community designed to ensure that all students are afforded a safe and healthy learning environment in which they develop the knowledge, skills and attitudes to reach their full academic and personal potential. This partnership is dedicated to providing all students with a 21st century education that will enable them to be life-long learners and contributors to a diverse and rapidly changing world.</p>

<strong></strong> Bold text. Example: <strong>MHS Web Design</strong>

<em></em> Italicized text. Example: <em>MHS Web Design</em>

<br /> Adds a line break (skips to next line).

<a href=”http://www.medfordpublicschools.org/”> This is a link to the Medford Public Schools webpage. Example:

<a href=”http://www.medfordpublicschools.org/”>Click here to go to the Medford Public Schools website</a>

To open a link in a new window or tab:

<img src=”picture.jpg” /> Code for adding an image. You can have .jpg, .gif, .png, etc.

“Nesting” HTML tags

Look at the examples above. Each example has a paragraph tag and another tag inside it. Notice how the paragraph tag is “opened” first and “closed” last while the other tags are closed in between the paragraph tags. HTML tags are always closed in reverse order, like this: <1><2></2></1> or <1><2><3></3></2></1>

List of HTML tags

http://www.w3schools.com/tags/default.asp

Note: some of these tags won’t be supported in HTML (wherever it says “deprecated”).

We will use W3schools.com as a resource. We will also use w3fools.com and htmldog.com.

Adding Links

Linking to outside webpages:

<a href=”http://www.medfordpublicschools.org/”> This is a link to the Medford Public Schools webpage. Example:

<a href=”http://www.medfordpublicschools.org/”>Click here to go to the Medford Public Schools website</a>

To open a link in a new window or tab add target=”_blank”:

Please now add a link to an outside website (school site, Google, class site, whatever)

Ordered and Unordered Lists

Ordered and unordered lists are two ways to display a list of items on your webpage. An ordered list shows a list with numbers (1, 2, 3, etc.) while an unordered list shows bullets.

Copy and paste only the following code into your about file:

A. To do an ordered list:
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

B. To do an unordered list:
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

Comments

Sometimes you might be working on a webpage with several people and you want to leave notes for them. You can do this right in the code and to make sure the browser doesn’t read it as something that should be displayed you need the following:

<! – -This is a comment- ->

Everything in between the brackets and dashes will not be visible to anyone who goes to your webpage and can only be seen by people looking at the code.

CSS Styling

Let’s do some styling so we can change fonts and colors:

Copy and paste the following into Notepadd++

<!DOCTYPE html>
<html>
<head>
<title>Title of the webpage</title>
<style type=”text/css”>
body
{
background-color:#d0e4fe;
background-image:url(dogs.gif);
background-repeat:repeat;
background-position:center;
}
h1
{
color:orange;
text-align:center;
font-family:Times New Roman;
font-size:3em;
}
h2
{
color:orange;
text-align:center;
font-family:Times New Roman;
font-size:2em;
}
p
{
font-family:Times New Roman;
font-size:1em;
}
</style>
</head>
<body>
<h1>Big Headline</h1>
<h2>Sub Headline (smaller)</h2>
<p>This is a paragraph.</p>
</body>
</html>

Let’s look at some colors:

http://www.colourco.de/

You can either use a color hex value or name

Another cool color chart

Favicons

Finally, let’s add a favicon to our page. Favicons are the tiny icons that appear on the top left next to a website’s name and URL.

First, you must design your favicon in some kind of image editor such as Photoshop. You might also be able to find free favicon generators online. Try this website: http://favicon-generator.org/. It will take a picture or graphic you have and turn it into a favicon. The picture must be a perfect square (same length and width). To do this open up your image with either Photoshop or whatever image editor you have on your computer and crop and resize your image to make sure it’s the same length and width. If you want, click here to download the Mustang logo to use (it is a perfect square).

If you don’t use an image that is a perfect square you will end up with a distorted favicon because the favicon it generates will be 16 pixels by 16 pixels.

Again, pay attention to file name and file type. Save your favicon as favicon.ico and save it in the same place as your index file (desktop or My Documents).

Now that you have created your favicon, step two is adding code to your webpage.

Add this to your head section:

Once you have done that, save your index file and refresh the browser. Hopefully you will see your new favicon!