Week 1 - STRUCTURE AND TEXT
INTRODUCTION
Question: What are the webpages I visit composed of?
Answer: This depends... At a minimum, all have HTML and CSS, the things we will discuss this term. Sites with interactivity and/or animations will have an additional layer of JavaScript/jQuery. Sites that store a lot of data in a database will have some sort of server-side language like PHP, Python, Ruby, etc. The typical site you visit (one that has interactivity and data) will require a web server (Apache, IIS, NGinx), a language server (PHP is still very common), and a database server (some sort of SQL server is still most common).
We think of these things as layers in a website. HTML forms the structural layer, while CSS forms the presentation layer and JavaScript/jQuery forms the behavioral layer. (I will discuss these in more detail in class.)
In this course (GWDA133), we will be learning the basics of structure and style (hence the "fundamentals" in the course title). You will learn a great deal more about styling and placement in the follow-on course, GWDA273. Then, you will start learning about adding interactivity (the behavioral layer) in the courses that follow GWDA273, namely GWDA233 (Adv. Web Page Design) and GWDA243 (Object-Oriented Scripting).
We will move at a rational pace, and you will have ample time to ask questions and practice what we discuss in class.
CHAPTER 1 - STRUCTURE
Think about a website you visited today or yesterday. Think about the structure of that page, ignoring the styling. That is what we will be dealing with in the first part of this term. HTML is used to form the backbone of a web page, establishing its logical flow. (CSS and JS can be used to change this logical flow - even on the fly - but that is for another discussion.)
Every HTML page has the following basic components:
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
The first line tells the browser that we have a document of type HTML. The second line begins the html code with an html tag. Every structural (and meta-data) item in HTML requires a specific tag. (There are many!) The third line begins the head (with a head tag), which should contain the title, meta-data about the site, links to behavioral layer files (JS/jQuery), links to presentation layer files (CSS), etc. (The head - in general - contains information about the page.) Note that the next tag you see begins with a slash (/). This is called a closing tag. Most HTML tags have to be closed in this way. Think of the content inside of the tags as being wrapped by the opening and closing tags. Next, we have the body opening and closing tags. The body will contain the actual content of a site. Remember this: the head contains information about the site, while the body contains the actual content.
Here is some HTML code. Don't worry right now about the content; just focus on the structure and the fact that content is contained within specific tags. I will draw an image on the board illustrating how you should view this structure (conceptually).
<!doctype html>
<html>
<head>
<title>Our First Page</title>
</head>
<body>
<h1>This is the Main Heading</h1>
<p>This text might contain an introduction to the rest of the page.</p>
<h2>This is a Sub-heading</h2>
<p>Many articles have several sections. This could be the first of them.</p>
<h2>Another Sub-heading</h2>
<p>Many articles have several sections. This could be the second of them.</p>
</body>
</html>
First, note the title tag. The text within it will show up in the browser's tab when this page is opened. (It is very important to use descriptive titles!) Next, note the h1, h2, and p tags in the body. The h1 and h2 tags are called heading tags, and are used to start new sections. (Think of, say, a headline on a newspaper.) The p tag is called a paragraph tag, and is used to, well, start a new paragraph. Let's look at how this displays before going further.
I'll display this directly on the white board and show how we should visualize this structure. For now, just imagine a big square containing the whole thing. That's the html box. Then imagine a thin, horizontal box around each of the lines. (In general, imagine a box around any content contained in a distinct tag.) This doesn't look very interesting, but it does illustrate the basic content of a site.
Here's a trick to help you accelerate your learning of HTML and CSS: viewing the source of others' web pages. This can easily be done in Firefox, Chrome, etc. I typically use Firefox, so that's what I'll show. Let's look at the page we just made.
Assuming the page is open in Dreamweaver, just click on the small globe icon and choose "Preview in Mozilla Firefox." Then, once it's open, just right-click on the page and choose "View Page Source." That's it! Here's what you'll see:
No surprise here, it looks just like we expect. The point here is to illustrate how you could inspect the code of others to see how they do things, get new ideas, learn new tricks, etc. For a more complicated example, let's look at the home page of the BBC. I'll navigate (in class) to www.bbc.com/news and then inspect the source. This is what we see:
In the image, I have scrolled down quite a bit to get to the start of the body. As you can see, it's a great deal more complicated than our simple example page. There are tags we haven't discussed, and there are even conditionals (look for the if IE things near the top of the page). Nevertheless, you can make out the tags in the page by the opening angle brackets (<) and closing angle brackets (>).
STRUCTURE SUMMARY
- HTML pages are text documents you can edit in Dreamweaver (or Bluefish, Notepad++, etc)
- HTML uses tags, which are characters that sit inside angled brackets. They act like containers and tell you something about the information that lies between them.
- Tags are also referred to as elements.
- Tags usually come in pairs. (There are exceptions, such as the <img> and <br> tags. We will discuss these exceptions throughout the term.) The opening tag denotes the start of a piece of content, and the closing tag denotes the end of that content.
- To learn HTML, you need to know what tags are available for you to use, what they do, and where they can go.
CHAPTER 2 - TEXT
When creating a web page, you add tags (known as markup) to the contents of the page. These tags provide extra meaning and allow browsers to show users the appropriate structure for the page.
In this chapter we will focus on how to add markup to the text that appears on your pages. You will learn about:
- Structural markup: the elements you can use to describe both headings and paragraphs
- Semantic markup: which provdies extra information; such as where emphasis is placed in a sentence, that something you have written is a quotation (and who said it), the meaning of acronyms, and so on.
HEADINGS
HTML has six levels of headings. In descending order of size, they are: h1, h2, h3, h4, h5, and h6. h1 is used for main headings, and h2 is used for first-level sub-headings. If there are further sub-heading levels, use the other heading tags appropriately. (h3 inside of h2, h4 inside of h3, and so on.)
Here's how they work:
<body> <h1>This is a Main Heading</h1> <h2>This is a Level 2 Heading</h2> <h3>This is a Level 3 Heading</h3> <h4>This is a Level 4 Heading</h4> <h5>This is a Level 5 Heading</h5> <h6>This is a Level 6 Heading</h6> </body>
Browsers will display each heading level at a distinct size. This size depends on the browser in question, but we will learn now to control the size later on (with CSS). For now, you need only know that h1 is the largest heading, and the size decreases as the heading level number gets larger (to a maximum of 6). (We will also learn how to change the font, color, letter spacing, etc, with CSS.)
PARAGRAPHS
To create a paragraph, surround the words that make up the paragraph with a p tag, as below. Each browser has a default font size (typically 16px), but we'll be able to control this later (with CSS).
<body> <p>A paragraph consists of one or more sentences that form a cohesive unit of discussion.
The start of a paragraph is indicated by a new line.</p> <p>Text is easier to understand when it is split up into units of text. Be sure to use
paragraphs appropriately!</p> </body>
BOLD & ITALIC
By enclosing words in b tags, we can bold content and make it stand out from the text around it. Similarly, by encolsing words in i tags, we can italicize content. We might do this to make it appear different, to emphasize it, or to follow convention (displaying ship names, foreign words, etc).
<p>This is how we make a word appear <b>bold.</b></p>
<p>Inside a product descripton you might see some <b>key features</b> in bold.</p>
<p>This is how we make a word appear <i>italic.</i></p>
<p>It's a potato <i>Solanum teberosum</i>.</p>
<p>Captain Cook sailed to Australia on the <i>Endeavour</i>.</p>
SUPERSCRIPT & SUBSCRIPT
The sup tag is used to contain characters that should be superscript, such as the suffixes of dates or mathematical concepts. The sub tag is used to contain characters that should be subscript, such as foot notes or integers in chemical notation.
<p>On the 4<sup>th</sup> of September you will learn about E=MC<sup>2</sup>.</p>
<p>The amount of CO<sub>2</sub> in the atmosphere grew by 2ppm in 2009<sub>1</sub>.</p>
WHITE SPACE
When a web browser comes across two or more adjacent spaces, it displays only one. This is called "white space collapsing." If you want white space in a line, you have to use a special character: , the "non-breaking space." (Coders indent their code - at least they should! - so this is why browsers white space collaps.) Note that only the third line below actually contains any extra white space.
LINE BREAKS & HORIZONTAL RULES
As we've seen, every paragraph (and heading) begins a new line. But what if you wanted to start a new line without using a new paragraph or heading? Just use the br line break tag. This is an example of a self-closing tag, since it doesn't contain any content.
Sometimes you want even more than a line break to indicate differences between content. You can use an hr horizontal rule tag to insert a line break AND a horizontal separator.
<p>The Earth<br />gets one hundred tons heavier each day<br />due to falling space dust.</p> <p>Venus is the only planet that rotates clockwise.</p> <hr /> <p>Jupiter is bigger than all the other planets combined.</p>
SEMANTIC MARKUP
There are some text elements that are not intended to affect the structure of your web pages, but they do add extra information to the pages − they are known as semantic markup.
STRONG & EMPHASIS
The use of the strong element indicates that its content has strong importance. For example, the words contained inside of a strong element might be intended to be read with strong emphasis. By default, browsers will show the contents of a strong element in bold. (You will be able to change this later, with CSS.)
The em element indicates emphasis that subtly changes the meaning of a sentence. By default, browsers will show the contents of an em tag in italic. (Again, you will be able to change this later, with CSS.)
<p><strong>Beware:</strong> Pickpockets operate in this area.</p> <p>This toy has many small pieces and is <strong>not suitable for children under five years old.</strong></p> <p>I <em>think</em> Ivy was the first.</p> <p>I think <em>Ivy</em> was the first.</p> <p>I think Ivy was the <em>first</em>.</p>
QUOTATIONS
There are two elements commonly used for marking up quotations:
The blockquote element is used for longer quotes that take up an entire paragraph. The p element (and any appropriate element) is used inside of the blockquote element. Browsers tend to indent block quotes, but don't use this element just for indentation. Reserve it for when you actually need it. (With CSS, you will have absolute control over how blockquotes appear. In fact, each of the sections on this page containing code samples has been styled with CSS.)
The q element is used for shorter quotes that sit within a paragraph. Browsers are supposed to put quotes around the q element, but IE does not − therefore many people avoid the q element.
<blockquote> <p>Did you ever stop to think, and forget to start again?</p> </blockquote> <p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the
problem.</q></p>
ABBREVIATIONS & ACRONYMS
If you use an abbreviation or acronym, then the abbr element can be used. A title attribute on the opening tag is used to specify the full term (which is provided to the browser - useful for SEO).
<p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p> <p><abbr title="National Aeronautics and Space Administration">NASA</abbr> do some crazy space stuff.</p>
CITATIONS & DEFINITIONS
When you are referencing a piece of work such as a book, film or research paper, the cite element can be used to indicate where the citation is from. (We'll learn about attributes to use later.) Browsers will render cite content in italics.
The first time you explain some new terminology (perhaps an academic concept of some jargon) in a document, it is known as the defining instance of it. The dfn element is used to indicate the defining instance of a new term. Some browsers will italicize dfn content. Safari and Chrome do not.
<p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million
copies worldwide.</p> <p>A <dfn>black hole</dfn> is a region of space from which nothing, not even light,
can escape.</p>
AUTHOR DETAILS
The address element has quite a specific use: to contain contact details for the author of the page. It can contain a physical address, but it doesn't have to. It may also contain a phone number and/or an email address. Browsers often display address contents italicized.
<address>
<p><a href="mailto:homer@example.org">
homer@example.org</a></p>
<p>742 Evergreen Terrace, Springfield.</p>
</address>
You no doubt will notice the a tag above. It is called an "anchor" or link tag. You use a tags to indicate something inside should be clickable and cause a redirect if clicked. The href attribute gives the address for the redirect. In this case, the mailto: prefix will cause the default mail program to open.
CHANGES TO CONTENT
The ins element can be used to show content that has been inserted into a document, while the del element can show text that has been deleted from it.
The content of an ins element is usually underlined, while the content of a del element usually has a line through it.
The s element that something is no long accurate or relevant (but that should not be deleted). Visually the content of an s element will usually be displayed with a line through the center. (It is called the "strike-through element.")
<p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p> <p>Laptop Computer:</p> <p><s>Was $995</s></p> <p>Now only $375</p>
SUMMARY
- HTML elements are used to describe the structure of the page (e.g. headings, subheadings, paragraphs).
- They also provide semantic information (e.g. where emphasis should be placed, the definition of any acronyms, when given text is a quotation).
HOMEWORK 1
Write up the necessary HTML to translate the image below into a page. (That is, make a page that looks like the image, using only the things you learned about today. Don't forget the page title!) Turn it in via the homework 1 drop box.
