30 Days of Web Design: January 2014

Thursday, January 30, 2014

For the Beginners in Web Design

Through trying to learn HTML and CSS as a beginner, I've found several websites that have been extremely helpful:

Codecadamy

This is a very interactive website, with hands-on coding. Go ahead and try the HTML lessons, and if you want to save your work, you can create an account with it (free!):

They also have Javascript, which is the language for web programming, and PHP which deals with back-end (back-end means closer to the server rather than the client) web creating. If you want to learn more programming, they offer lessons for Python as well.

HTML Dog

This is really the website that first introduced me to web design. I created my first webpage with its tutorial, and now it looks (beautifully) like this:

Ta da! Do check out those great resources!

Wednesday, January 29, 2014

CSS: Rules, declarations, selectors, and on and on...

CSS style sheets are basically rules that say which element should look which way. So, let's pick apart style sheet to see what it is made up of.

This is a style sheet (which is is external and should be linked to the HTML(s)):

h1 {

color: red;

border-bottom: 1px solid red;

}

h2 {

color: red;

margin-left: 100px;

}

p {

margin-left: 100px;

font-size: small;

font-family: sans serif;

}

img {

float: right;

margin: 0 12px;

}

This is a rule in that style sheet:

h1 {

color: red;

border-bottom: 1px solid red;

}

This is the selector in the rule:

This is the declaration block in the rule:

{

color: red;

border-bottom: 1px solid red;

}

Whereas this is one declaration in the declaration block:

color: red;

This is the property in the declaration:

color

And this is the value for the property:

red

To put it all together:

selector {

property1: value1;

property2: value2;

}

(rule, declaration block, declarations)

That's a lot of terminology!

Tuesday, January 28, 2014

6 "Trades" of Web Designing

If you are a beginning web designer, or a solo one, you probably do all of the six trades: graphic design; information design; interface design; document production; scripting and programming; and multimedia. That's okay. But some people are specialists, and these are what they specialize in.

Graphic Design

Graphic design is how the web page looks: the pictures/graphics, the colors, fonts, sizes, layout in terms of the looks...

Information design

This focuses on how the information is connected: how you get to the information, how one content links to another. They make plans and diagrams and charts about how the information is organized.

Interface design

People how work on interface design work on how the page works for the users/visitors: the buttons, links, organization, etc. Normally, the information, interface, and graphic designs are very interrelated.

Document production

This is the creations and troubleshooting of the HTML, styles sheets, scripting (like Javascript), and images that are part of the website.

Scripting and programming

To make a website have more user interaction, and make the website more than just an "unmoving" page showing information. This is handled by people called "web programmers," or "developers."

Multimedia

People who work with multimedia know how to make audio and video files that work well on the web. That's one of the special things about the Web, versus other ways of sharing over the Internet (see The Internet versus The Web): the Web allows sharing things other than boring text (pictures, videos, audios, interactivity, etc.)

You can learn about all of these subjects, or you can specialize in one as a part of the web designing world.

Monday, January 27, 2014

The Horizontal Rule

Hello! Today's short topic is on horizontal rules, as you can probably guess from the title! Horizontal rules are used to divide up the web page by splitting up the sections. I think that when I transfer this blog off, onto my own domain, I'll be using horizontal rules to divide my blog posts. Just a thought!

This is the way to add a horizontal rule (by default, it's a thin but solid, gray line across the screen):

<hr />

Pretty simple, right? If you haven't noticed, "hr" stands for horizontal rule... And as for the name "horizontal rule," well, the horizontal part is pretty straightforward. Think of rule as in a straight line ("metric ruler") instead of something you're supposed to follow.

Here's an example of a horizontal rule in HTML, in case you want more clarification:

<html>

<head>

<title>Example of Horizontal Rule</title>

</head>

<body>

<h1>Example of Horizontal Rule</h1>

<hr />

<h2>A Section</h2>

<p>The content/stuff for this section</p>

<hr />

<h2>Another Section!</h2>

<hr />

<h2>And Another Section!</h2>

<hr />

<h2>And Another Section!</h2>

<hr />

<h2>And Another Section!</h2>

<hr />

<h2>And Another Section!</h2>

</body>

</html>

And this is what it looks like!

I know; I went a bit overboard with the sections... Oh well! Maybe now you super ooper get it!

Sunday, January 26, 2014

2 Ways to Add Nice Looking Code to Your Website/Blog

For those of you out there who also blog about code and want to paste some code into their websites, I've found several ways to do it.

#1: Gists

One way is to use Gists. Go to GitHubGist and paste your code in. Don't forget to give it a title, and choose the right language (text, CSS, HTML, etc.)! Then click Create Public Gist. It'll bring you to a page that shows your code, with on the left: Gist Detail, Revisions, Download Gist, Clone this gist, Embed this gist, and Link to this gist. Copy and paste the code under Embed this gist into the HTML of your website. Ta da! It should look like this:

#2: Notepad++

The other way, which is my favorite, and the easiest way, is to just copy and paste. You open up Notepad++ (download it here) put your code in it, and save it with the correct file extension so that Notepad++ knows how to highlight and "make pretty" your code. Then, select the portion that you want to paste onto your website, right-click, then choose Plugin commands>Copy Text with Syntax Highlighting. You might not have to do this, but for me, I then need to paste (Ctrl-v) into Microsoft Word, then copy (Ctrl-c) and paste (Ctrl-v) into blogger.

For example:

This is what happens if I paste directly into here without going to Word first:

<html>
<head>
  <title>Totally random</title>
</head>
<body>
  <p>Here's some pretty syntax for you!</p>
</body>
</html>

And then this is what happens when I do paste and then copy and paste from Word:

<html>

<head>

<title>Totally random</title>

</head>

<body>

<p>Here's some pretty syntax for you!</p>

</body>

</html>

There! I hope this helps you paste code into your website the way you want it to look!

I hope that made sense. Please comment if you have any questions!

Saturday, January 25, 2014

A Little History of the HTML

HTML stands for Hypertext Markup Language. Tim Berners-Lee first came up with HTML in this particle physics lab (CERN). I did a little research and I think CERN is basically a scientific lab where scientists explore and research about the universe. I'm not too sure why HTML links to that, though... This is their website:

The original HTML looks like this:

<TITLE>HyperText Mark-up Language</TITLE>

</HEADER>

<BODY>

<H1><A

NAME=4>HTML</A></H1>The <A

NAME=0 HREF="../TheProject.html">WWW</A> system uses marked-up text

to represent a hypertext document

for transmision over the network.

The hypertext mark-up language is

an <A

NAME=7 HREF="SGML.html">SGML</A> format. WWW parsers should

ignore tags which they do not understand,

and ignore attributes which they

do not understand of tags which they

do understand.<P>

To find out how to write HTML, or

to write a program to generate it,

read the following sections:-

<DL>

<DT><A

NAME=23 HREF="Text.html">Default text</A>

<DD> How text is interpreted

when uninfluenced by tags

<DT><A

NAME=2 HREF="Tags.html">The tags</A>

<DD> A list of the tags used

in HTML with their significance.

<DT><A

NAME=24 HREF="Entities.html">Entities</A>

...

Notice how the tags are in capitals and there are lots of names... But a lot of it is quite familiar!

Today I think the most recent is HTML 5. It looks like this:

<p class="no-num no-toc subline">A vocabulary and associated APIs for HTML and XHTML</p>

<h2 class="no-num no-toc" id="w3c-candidate-recommendation-6-august-2013">W3C Candidate Recommendation 6 August 2013</h2>

</header><dl><dt>This Version:</dt>

<dt>Latest Published Version:</dt>

<dt>Latest Editor's Draft:</dt>

<dd><a class="latest-link" href="http://www.w3.org/html/wg/drafts/html/CR/">http://www.w3.org/html/wg/drafts/html/CR/</a></dd>

<dt>Previous Versions:</dt>

<dt id="specification-editors">Editors:</dt>

<dd><a href="http://berjon.com/">Robin Berjon</a>, W3C</dd>

<dd><a href="mailto:sfaulkner@paciellogroup.com">Steve Faulkner</a>, The Paciello Group</dd>

<dd><a href="mailto:travil@microsoft.com">Travis Leithead</a>, Microsoft</dd>

<dd><a href="mailto:Erika.Doyle@microsoft.com">Erika Doyle Navara</a>, Microsoft</dd>

<dd><a href="mailto:eoconnor@apple.com">Edward O'Connor</a>, Apple Inc.</dd>

<dd><a href="mailto:silviapfeiffer1@gmail.com">Silvia Pfeiffer</a></dd>

<dd>WHATWG:</dd>

<dd><a href="mailto:ian@hixie.ch">Ian Hickson</a>, Google, Inc.</dd>

</dl><p>

This specification is also available as a <a href="single-page.html">single page HTML</a> document.

</p>

...

That's how much HTML has changed from 1992! I personally think it's just syntax, really...

Friday, January 24, 2014

What in the WORLD does ALL that mean???

So we created a website, but all I had you do was copy some code, right? Well, let's figure out what it means!

This is the basic code we started out with:

<html>

<head>

<title>My First Webpage</title>

</head>

<body>

<h1>Name's First Webpage!</h1>

<p>Hello there! Just trying this out.</p>

</body>

</html>

And this is what it looked like:

HTML is basically made up of elements. This is a really good diagram I took a picture of from the book (when I say "the book" I mean Learning Web Design: A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics):

Another example is <h1>Name's First Webpage!</h1>. means Heading 1. Heading 1 is the biggest/most important heading. Headings go from h1 to h6 , h6 being the least important.

I'll explain some more tags and elements tomorrow!