My web design class is over, hence the lack of posting. However, you can find latest posts by me on my new site for my Digital Marketing course!
http://digitalmarketingschools.wordpress.com/
I will be blogging about top/best digital marketing schools and other digital marketing topics. Happy reading!
Monday, October 8, 2012
Wednesday, April 11, 2012
File Transfer Protocol
After you design a website, you need to transfer it to a web server. A host is required at this point.
That's where File Transfer Protocol (FTP) comes in. Several software packages that allow you to FTP are WS-FTP, CuteFTP, Fetch (for Macs), FileZilla or Dreamweaver. Dreamweaver is a web editing tool used in this Web Design course that has a convenient FTP feature.
Our personal host names for the university are http://www.personal.umd.umich.edu/~uniquename.
For people not using personal hosting through our university, you need a domain name.
For FTP, you need four things to get started!
1. Name of Host
Ex. allencreek.org is reserved as a domain name for ten years. The name for the host maps to the
website name.
2. Username
For students at UM-D, it's the student's uniquename.
3. Password
4. Directory/Public Folder
For UM-D, it's under the Public/HTML folder
So your personal website http://www.personal.umd.umich.edu/~uniquename will be mapping to your Public/HTML folder.
That's where File Transfer Protocol (FTP) comes in. Several software packages that allow you to FTP are WS-FTP, CuteFTP, Fetch (for Macs), FileZilla or Dreamweaver. Dreamweaver is a web editing tool used in this Web Design course that has a convenient FTP feature.
Our personal host names for the university are http://www.personal.umd.umich.edu/~uniquename.
For people not using personal hosting through our university, you need a domain name.
For FTP, you need four things to get started!
1. Name of Host
Ex. allencreek.org is reserved as a domain name for ten years. The name for the host maps to the
website name.
2. Username
For students at UM-D, it's the student's uniquename.
3. Password
4. Directory/Public Folder
For UM-D, it's under the Public/HTML folder
So your personal website http://www.personal.umd.umich.edu/~uniquename will be mapping to your Public/HTML folder.
Wednesday, March 14, 2012
Design Notes and Wireframes
Hyphens are better to use for SEO:
race-car-engine.html
rather than
race car.html which a browser might turn into: race%20car.html
Creating a wireframe allows you to further your design plans by organizing a layout before you actually are constructing it in Dreamweaver.This site will be used to create wireframes to plan for the final project website.
race-car-engine.html
rather than
race car.html which a browser might turn into: race%20car.html
Creating a wireframe allows you to further your design plans by organizing a layout before you actually are constructing it in Dreamweaver.This site will be used to create wireframes to plan for the final project website.
Wednesday, February 22, 2012
Advanced Tables, Forms and HTML Day 1
- Content in title tags are what show up at the top of the browser as the title (ie. <title>Forms Practice</title>
- Inside the computer's public folders, there should be a public HTML folder by the Professor. All those documents are viewable by anyone.
- When you fill out a form, the information goes from the HTML form to a CGI Script. From there, the information can go to update a database, go to an e-mail address, create an e-commerce transaction, or update another website (such as C-Tools or Blackboard).
- Sample Demo shared in class: The Professor's Form
Check Boxes allow for more than one selection.
Text Areas allow for large areas of space for people to add text.
- Form tag needs several values.
<form method="post"
action="http://www-personal.umd.umich.edu/cgi-bin/htmail/shahnazk@umd.umich.edu">
<div align="center"><b>Sample Form</b></div>
This will look like:
Practice with Forms
<p>2. Please enter your e-mail address.
<input type="text" name="from" value="Your e-mail here">
<input type="text" name="from" value="Your e-mail here">
The value puts the quoted words into the box on the form.
<p>3. Would you like to be added to our mailing list?
<input type="radio" name="3_MailingList"
You shouldn't have space, put an underscore to make the code work.
_____________________________________________________
With these tags, you can build a form:
<html>
<head>
<title>Forms Practice</title>
</head>
<body>
<h1>Practice with Forms</h1>
<!--BEGINNING OF FORM-->
<form method="post"
action="http://www-personal.umd.umich.edu/cgi-bin/htmail/const@umd.umich.edu">
<p>1. Please enter your first name
<input type="text" />
</p>
<input type="submit" />
</body>
</html>
This will look like:
Practice with Forms
1. Please enter your first name______________________________________________________
This is an almost final form:
These are the sequence of codes used to create it all:
<html>
<head>
<title>Forms Practice</title>
</head>
<body>
<h1>Practice with Forms</h1>
<!--BEGINNING OF FORM-->
<form method="post"
action="http://www-personal.umd.umich.edu/cgi-bin/htmail/const@umd.umich.edu">
<p>1. Please enter your first name.
<input type="text"
name="1. First Name" />
</p>
<p>2. Please enter your e-mail address.
<input type="text" name="from" value="Your e-mail here">
<!--The line break after the question allows the circle for people to check
to have the word Yes.-->
<head>
<title>Forms Practice</title>
</head>
<body>
<h1>Practice with Forms</h1>
<!--BEGINNING OF FORM-->
<form method="post"
action="http://www-personal.umd.umich.edu/cgi-bin/htmail/const@umd.umich.edu">
<p>1. Please enter your first name.
<input type="text"
name="1. First Name" />
</p>
<p>2. Please enter your e-mail address.
<input type="text" name="from" value="Your e-mail here">
<!--The line break after the question allows the circle for people to check
to have the word Yes.-->
<p>3. Would you like to be added to our mailing list?
<br />
Yes
<input type="radio" name="3_MailingList" value="Y"
checked="checked"/>
No
<input type="radio" name=3_Mailing List" value="N"/>
</p>
<br />
Yes
<input type="radio" name="3_MailingList" value="Y"
checked="checked"/>
No
<input type="radio" name=3_Mailing List" value="N"/>
</p>
<br />
<input type="submit" />
</body>
</html>
Wednesday, February 15, 2012
HTML Day 3
Absolute Paths mean that an image linked to a website must be accurate. Some website have missing image symbols because the picture is no longer available via a different website or in the folder where it used to reside.
<img src="lily.jpg" height ="225" width="169" alt="picture of a lily boarder="0" />
"src"
- indicates the location of the image
"height"
- defines how tall the image is in pixels
"width"
- defines how wide the image is in pixels
"border"
- thickness of border around image in pixels
- border="0" turns off border entirely
- it's a good idea to use a border size because if the image is no longer accessible by the system, then the border will still appear letting visitors to the site know that there was supposed to be an image there.
"alt"
- alternative text to display (instead of image)
- this allows the user to have a correctly loaded page in case they have turned off images in their browser
dots indicate how many folders to get into
* Use a good description of the image, name of product so it's easier to idenfity
*Always lower case file names or hyphens so the browser can recognize the folder.
<img src=".../../lily.jpg" height ="225" width="169" alt="picture of a lily boarder="0" />
so it's ../comp300
GIF Files: produce best results when the image is under 256 colors. They support transparency and support animation.
JPEG Images: produce best results for photographs and have huge compression ratios.
Links!
<a href="http://www.yahoo.com">Yahoo</a>
Link colors are important so people can keep track of what they've visited.
A link appears blue.
Once a site is visited, the link turns purple.
Active state is red. The font is standard, Times New Roman size 12 font.
<img src="lily.jpg" height ="225" width="169" alt="picture of a lily boarder="0" />
"src"
- indicates the location of the image
"height"
- defines how tall the image is in pixels
"width"
- defines how wide the image is in pixels
"border"
- thickness of border around image in pixels
- border="0" turns off border entirely
- it's a good idea to use a border size because if the image is no longer accessible by the system, then the border will still appear letting visitors to the site know that there was supposed to be an image there.
"alt"
- alternative text to display (instead of image)
- this allows the user to have a correctly loaded page in case they have turned off images in their browser
dots indicate how many folders to get into
* Use a good description of the image, name of product so it's easier to idenfity
*Always lower case file names or hyphens so the browser can recognize the folder.
<img src=".../../lily.jpg" height ="225" width="169" alt="picture of a lily boarder="0" />
so it's ../comp300
__________________________________________________________
JPEG Images: produce best results for photographs and have huge compression ratios.
__________________________________________________________
Links!
<a href="http://www.yahoo.com">Yahoo</a>
Link colors are important so people can keep track of what they've visited.
A link appears blue.
Once a site is visited, the link turns purple.
Active state is red. The font is standard, Times New Roman size 12 font.
Wednesday, February 8, 2012
HTML Day 2, Part 2
Lists
Ordered: alphabetical or numeric, Non-Ordered: bullet list
<ol> tag to start list
<li> tag is for every item
example:
<ol>
<li>Blue</li>
<li>Red</li>
<li>Green</li>
<li>Orange</li>
</ol>
The example will look like this:
More Developed Version of Code
<html>
<head>
<title>About Me - Insert Name
</title>
</head>
<body>
<p align="center"><em> This page is an overview of my work and interests.<br /> <strong> If you have any questions, please contact me at (insert e-mail).</strong>
</p>
<h1 align="center">(insert name)</h1>
<hr width="75%" />
<p align="center">Here you will read a little about me!</p>
<h2>Ahhh, a Poem</h2>
<p>This is just a poem<br />
to convey line breaks<br />
It contains an empty element</p>
<h3>Hobbies</h3>
<p>This is where I'd enter a list of hobbies.</p>
<h4>Places I've lived</h4>
<p>I'd list the first place.<br />
I'd list the second place.<br />
Here I'd list where I'm currently living.</p>
</body>
</html>
End result in browser:
- <hr />
Ordered: alphabetical or numeric, Non-Ordered: bullet list
<ol> tag to start list
<li> tag is for every item
example:
<ol>
<li>Blue</li>
<li>Red</li>
<li>Green</li>
<li>Orange</li>
</ol>
The example will look like this:
More Developed Version of Code
<html>
<head>
<title>About Me - Insert Name
</title>
</head>
<body>
<p align="center"><em> This page is an overview of my work and interests.<br /> <strong> If you have any questions, please contact me at (insert e-mail).</strong>
</p>
<h1 align="center">(insert name)</h1>
<hr width="75%" />
<p align="center">Here you will read a little about me!</p>
<h2>Ahhh, a Poem</h2>
<p>This is just a poem<br />
to convey line breaks<br />
It contains an empty element</p>
<h3>Hobbies</h3>
<p>This is where I'd enter a list of hobbies.</p>
<h4>Places I've lived</h4>
<p>I'd list the first place.<br />
I'd list the second place.<br />
Here I'd list where I'm currently living.</p>
</body>
</html>
End result in browser:
Term List
metadata
empty element
attributes and values
pixel
Homework will include:
About Me/HTML
- 4 Basic Tags
- Headings (2)
- Lists (like bullets)
- Block quote
- Comment - <hr />
HTML Notes Day 2
Syntax means having proper values and quotes for coding. It's similar to having proper sentence structure in essay writing.
Saving an .html document through Text Edit or Notepad should be saved with a hyphen.
This is helpful with search engine optimization (SEO).
A line break tag is: <br />
It's an empty element. A <br> and a </br> can't be used. The computer will search for the latter but it won't find one. It must be made to look different and that is why the <br /> is used.
The horizontal line: <hr />
This is also an empty element. This will give the heading a horizontal line behind it.
For example:
<h1>About Me</h1>
<hr />
You can add this to the horizontal rule to make it a certain size!
<hr width="75%" />
<em> means emphasis. So the typography will become italicized.
You can power up a tag. There can be left, right and center.
<p align="center">
<tag attribute="value">
The attribute and value get placed into the first tag, not the ending one.
For example:
<p align="center"><em> This page is an overview of my work and interests.<strong> If you have any questions, please contact me at (insert e-mail).</strong>
</p>
Adding more Attributes:
<h1>About Me</h1>
<hr width="200" align="left"
size="10"/>
Line under heading won't be shaded:
<hr no shade width="200" align="center" size="10" />
Comment Tag
<!--insert comment-->
Most useful for when you need to write something like Headings so you know yourself where your heading tags begin. Also very useful when you want to store some codes but don't want to activate them now. So you would start out with the tag and then put a bunch of codes.
<!-- Enter codes-->
Deprecated Tag
W3C World Wide Web Consortium comes up with all the standards.
<center>
...
</center>
The font tag is also a deprecated tag. They come out with there's a better way to do it.
CSS is presentation oriented (font, color) while HTML is structure oriented.
CSS has different instructions:
h1 has {color:blue;}
p
{fontfamily:verdana;}
It's still useful to know the old version such as the font tag that's old because you might use an admin tool or something.
An example with color, font face and size:
<font face="Helvetica" size="6"
color="blue"> Hey Read This </font>
* use common fonts that will show up on standard computers
_____________________________________________________________________________
Sample HTML Coding In-Class Assignment
<html>
<head>
<title>About Me - (insert name)
</title>
</head>
<body>
<p> This page is an overview of my work and interests.<strong> If you have any questions, please contact me at (insert e-mail).</strong>
</p>
<h1>About Me</h1>
<p>This is where you would insert a paragraph about yourself.</p>
</body>
</html>
About Me
- Shae Khan
- Hi. I'm Shae. You have landed on a blog for one of my classes at the University of Michigan - Dearborn. Happy reading!