Tuesday: An Introduction to Code
Today offers a crash course in all things web.
Learning the Basic Language: #1 Mechanical Parts
1. Server: this is the database(s) that store(s) web pages. Every page on the web is stored on a server somewhere.
2. Domain: this is the unique id for a particular web address, its URL (Universal Resource Locator).
3. Browser: this is the software on your computer that interprets a web page’s code(s). These include Chrome, Firefox, and Safari. Every browser will interpret code a bit differently, which is why some pages can look different in different browsers. For this project, I highly recommend using Chrome, because the “developer’s tools” (View > Developer > Developer’s Tools) are amazing for people learning how to code.
Distinguishing Different Kinds of Code
The web is comprised of three primary kinds of code, each with a different primary function:
1. HTML, otherwise known as Hypertext Mark-Up Language, is used to mark up content.
2. CSS, or Cascading Style Sheets, is used to style content. HTML handles content, CSS handles form/design.
3. Javascript, often designated .js, is used to create interactive or dynamic elements. We will not be playing with .js in this class (although we might look at how to borrow existing .js from open-source libraries.
Getting to Know HMTL
HTML code “tags” different kinds of information, informing the browser what that kind of information is and how it should be displayed. While CSS can alter the default presentation, adding more sophisticated layouts and styles, every browser has a default style for presenting “naked” .html code.
Today we’ll talk about the various parts of a web page coded in .html. We’ll first think about this structurally, then talk about the specific .html tags as you code up print versions of your resume in the program Notepad++. Note: Mac users should download a program called TextWrangler. It is both free and amazing.
Basic Parts of an HTML Page
An HTML page has two basic parts, the head and the body.
The head is something that only the browser can “see.” It contains information about what kind of page it is (thus telling the browser how to render or display the page), the title of the page (this is what appears in your tab in chrome, for instance), the author, and the subject matter. Information regarding the subject matter is called “metadata” and is a major component of SEO, or search engine optimization. Often PWRT majors are asked questions about whether they are familiar with SEO.
The body contains the actual content that people will see once rendered by the browser. ALL content in an .html page needs to be in at least one tag. Tags operate according to a simple rule, open and close. For instance, opening a paragraph looks like this: <p>, and closing it looks like this: </p>. That slash in the second tag is the close symbol. Certain special tags will open and close in the same tag, like the line break tag: <br />
There’s two ways to think about tags–structurally and semantically.
Structural tags say what kind of information something is:
- is it just regular writing? What, in .html, we call a paragraph: <p>?
- Or is it a header, which we number by order of importance: <h1>?
- Or is it a block-quote that we want set off and indented? <blockquote>?
- Perhaps it is a bulleted list: <ul>?
- In which case each item in the list would be a list item: <li>?
These are the basic content tags that you will use to code 99% of all textual content on a web page. There are other tags to “point,” or link, to images, audio content, or videos. We’ll talk about those later.
There are other tags we use to point out the significance of particular content. These are called semantic tags, because they influence the meaning of specific text within structural .html. That sounds a lot more complicated than it is.
- Right now you might feel fubar. Don’t worry, .html is not that hard–especially the acronym tag!
- You might want to stress a particular word. No problem, use your friend the emphasis tag: <em>!
- Perhaps you really need to call attention to something important. Go &lf;strong> or go home.
- And if you need the code for a special character — like that m-dash I just used — you can find that here: on this Special ASCII HTML character code page
That last bullet above contains the most powerful of all HTML tags: the anchor tag. The anchor tag is what facilitates links. Links are what allow the web to exist, and what have radically transformed the availability and dynamic interaction of our contemporary information ecology. Yay links!
Of course, most of us know what they are, but how many of us know how they work? A link is composed of two parts, the SIGNAL and the TARGET. The signal is the language you see underlined in blue (or, more common today, set apart via a different color and/or font-weight). The target is the URL for the desired page. For instance, I could write the sentence: I love the Oatmeal because he makes awesome comics about the Internet. The code looks like this:
<p>I <em>love </em> the Oatmeal because he makes <a href=”http://theoatmeal.com/comics/no_internet”> awesome comics about the Internet</a>.</p>
I tell beginning coders: humans are forgiving readers. If you make a small grammatical mistake, the majority if readers will fail to even notice it. Or if they do, then they will fox it for you in their heads without any problems. Jerkfaces will make a comment about your improper grammar because obnoxious.
Here’s the thing: browsers are not forgiving readers. If you make one little mistake in your .html code, then the browser will “break” the page and laugh at you. You will spend hours pouring over your code, wondering why something isn’t working right. You will show it to me. I will look at it for 30 seconds and find the mistake. You will laugh a laugh that crazy people would think sounds crazy. This is an unavoidable component of learning to code HTML and CSS.
Your assignment: you brought with you to class today a .doc(x) of your resume. I want you to transform that resume into some HTML. I want you to run that .html page through the W3C (World Wide Web consortium, a group that works to consolidate and standardize coding practices to minimize the impact of browser disparity and make the web increasingly accessible) Validator. The Validator will tell you how many errors you have made with your code, and identify the specific lines in the code that contain errors. Please validate by file upload. You can find the W3C Validator by clicking on this link. Once you have the Green Bar of Happiness you are done with this assignment and can submit the page of .html to the assignment folder in Canvas. I am here today to help you. Good luck!
