Learn about web design through the creation of your own web sites.
⬇ Scroll Down ⬇
Don't worry. Your first webpage will be really simple, and you'll go through it one step at a time.
We have to change a few settings on our class computers before we can write straight HTML.
Watch this first video to learn how to setup
TextEdit to write HTML on our computers.
"Hello World" is the first thing most students learn to code, regardless of what language. Follow this step by step tutorial to create and test an extremely simple website.
See the videoCreate just a simple webpage containing just
a string of text, like “Hello World”.
Take a screenshot of it and put it in a blog
post. Provide a couple sentences on your
thoughts about creating it.
Lets talk a little bit about HTML and how you write it.
HTML stands for Hyper Text Markup Language-
You're probably thinking "Ok", but aren't really sure what that means.
So, what's that mean?
A Markup Language makes notes on how to display things.
HyperText is writing that is parallel to other pieces of writing.
Huh?
Think about a story, you read one sentence, then the next, until you finish the paragraph,
then you start the next, until you finish the page, then you start the next page. Stories are
normally serial, or going in a specific order. HyperText doesn't have to go in this order.
If you are on a website about your favorite actor, you click on the page about them, or you can
go to the page to see what movies they are in, or you can go to the page with pictures of them,
and you can jump from one page to another without having to go in any specific order.
THAT is a HyperText; pages in parallel, not in a specific series.
A Markup Language is NOT the same thing as a programming language.
HTML, a mark up language, instead tells an internet browser how to arrange and structure content.
It can tell your internet browser where to load text, and how big to make it, what color, and
whether or not it should be a link. However, HTML doesn't really DO anything, it just tells the
internet browser how to display things. Programming, however, can do math, create graphics,
model physics, rerun certain parts, do something only if other things happen first, create variables,
and all sorts of other things.
HTML can't even do 2+2. Seriously, it can't- that's not what it's for.
Use TextEdit to create a new html file. Don't forget, you have to save it as a .html
Start with the following code:
<html>
<head>
<title>Make a Title Here</title>
</head>
<body>
Make Some Text Here
</body>
</html>
Something to notice, almost everything in the < > is then repeated again with </ > later in the document.
.
What are tags? Tags are the little things inside
of these < >, called Chevrons or angle brackets. So, you've already used quite a few tags.
Lets try a few more. With your partner, try
putting them in different places in your
document and see what happens.
Can you figure out what they do?
Tags:
<b> </b> and <i> </i> and <u> </u>
<sub> </sub> and <sup> </sup>
<del> </del> and <mark> </mark>
<h1> </h1> and <h2> </h2>
<small> </small>
<code> </code>
<center> </center>
<p> </p>
<br>
Screenshot a picture of your experimentation with
these new tags.
On your blog, input the screenshot.
Then, copy and paste the tags, and
tell me what you think each one does.
Today, we are going to complete HTML 1.0
No really, in just today, you'll probably be able to finish learning all of HTML 1.0
In fact, there's a couple things you can't even use that you already know from the previous assignment.
You already know too much... I've taught you too much. I'm sorry.
That's believed to be the first webpage from November 13, 1990. The original HTML was extremely limited. The following tags were all in the original HTML by 1992.
<title> </title>
<nextid 1> <nextid 2> ...
<a name="text"> <a href="text.html#text">
<a type="types"> </a>
<isindex>
<listing> </listing>
<plaintext>
<p>
<h1> ... <h2>
<address> </address>
<hp1> </hp2> <hp2> </hp2> ...
<dl> <dt> <dd> </dl>
<ul> <li> </ul>
<menu> <li> </menu>
<dir> <li> </dir>
That's it. Thats all of the original HTML.
.
What about <html> </html>, <head> </head>,
<body> </body>? Or <b> </b>, <i> </i>,
<center> </center>, & <br>?
I didn't forget them, they didn't exist yet.
These weren't around until HTML+ in 1993.
Do you remember the difference between a
Text and a Hyper Text? Well, so far, we haven't
really put the HYPER in hyper text...
So- lets fix that. In this video, I'll walk you through
the process of linking one html file to another, as well as how to link within the same text file.
Look at the content in the reference box.
Some of these tags, you've already used
and some of the tags you know didn't
exist in the original HTML.
Try out the tags that are new to you.
Can you figure out what they do?
If you think you've got a majority of it, show me and we’ll see if everything worked. If everything looks good, screenshot your page with the link, and the page it goes to.
Post the screenshots on your blog and provide a couple sentences of reflection about your process and experience.
Today, you’ll start looking at HTML+
This activity might take two days, maybe 3 depending on testing.
You have a Take-Home Quiz based on what we’ve gone over so far.
You may retake it as many times as you’d like, and you may use your notes.
The original HTML was pretty limited, and all the tags could fit in just a page.
This is not the case with HTML+
As the web became public, there was a lot of interest into the possibilities, and new features for the language. The W3 has the original documentation on HTML+, including whole sections on different tag types.
Create an image. Make the image a link.
Put the whole thing inside of a table.
Create a 2nd table & use the table header tag.
Use the table colspan tag too.
Screenshot both and
post them on your blog.
You've played with HTML quite a bit so far...
But I expect some of you might be tired of looking at black text on a white background with blue links.
We are going to jump forward in time, beyond the HTML+ (proposed as standard in November of 1993), beyond
HTML 2.0 (standard in November 1995), straight to HTML 3.2 (Code name Wilbur, January 1997).
What about HTML 3.0? The jump from HTML 2.0 to the draft for HTML 3.0 was so great, that it
was actually too much, and it was not implemented. The next standard for HTML following HTML 2.0 was HTML 3.0
Anyways... Lets get to learning how to use color.
This will take more than one class day.
A hexadecimal code is a six digit code that we coders use to have a computer do something. With HTML, we can use the to create colors.
How to use color in HTMLUsing HTML, create a table of color ranges.
Lets create ROYGBV, or the colors
of the rainbow (without indigo).
Have the table show colors fading from black.
Watch the video for more information.
Post your completed table to your blog.
Confused about RGB and Hex Codes?
He's going to use some code we haven't used yet, such as style tags and div tags. That's ok, don't let that worry you. Pay attention to how he combines numbers to create different characters.
Don't understand how F can be a number?
Learn more about Color Codes, Hexadecimal Code, and how it relates to binary, bits, and bytes.
You've learned quite a few tags.
Learning HTML and how to use it is obviously very important for a web designer.
However, it’s not the only thing that’s important. Learning how to create graphics
is also very important for any designer.
For this assignment, you will use images and describe something in them using
html tags. In class you will use Photoshop to modify the image, adding the text
ontop. See the example below. A video on how to do this is also provided.
TBA
You can take your own pictures or you can use creative commons/public domain images.
You’ll need to find at least 5 images that can be described using html tags you’ve learned at this point.
For homework, you had to come up with three ideas for a website.
Today, create a plan for a website based on one of those ideas.
First, you need to understand how to plan a website.
Lets talk about basic website planning.
A basic website plan consists of a storyboard,
and a wireframe. That’s what you’ll be creating
in a small group with a classmate or two.
⬇ Watch my video to learn more. ⬇
We are going to create our first website rather quickly, and so, we will work together to get more done quickly. So, create groups of 2 or 3 people each. No one can work by themselves.
On a piece of paper, write down the ideas
each person came up with. Then, discuss
these ideas and decide what the
group website will be.
As a group, decide what pages the website
will have. Don’t get too complicated, 2-3 pages per person in your group. Make a storyboard
As a group, sketch different potential
wireframes for your page. Discuss and
decide which you want to use.
When your group has everything figured out,
turn in the plan. This includes the ideas the group had with the chosen idea- and the storyboard of your website- and lastly the wireframes your group created, including the wireframe the
group selected.
or...
additional video on
AND...
Before you actually build the website you’ve designed, it is important to
understand a few things about organizing your files for your website.
It is more than just good form, doing it wrong can actually hinder your website.
Understanding this now can save you a lot of headache later.
Learn about best practices in organizing the
files for your website, and why it’s important.
⬇ Watch my video to learn more. ⬇
Setup folders for your own webpage,
take a screenshot of them and
post it to your blog.
When working with others, it’s important that everyone working on it has the EXACT
same folder setup, letter for letter.
If you had a hard time understanding my video,
or just want to hear it again explained by some one else- I’ve found a few similar videos.
And two created by a community college professor for his web design students.
File Structureand a very similar one he made:
File & Dir Org.