Class 1 - Course Intro, Basic HTML
Please watch these videos:
- Intro Video 1- (7:25 - Note that times are shown in min:sec)
- Please watch this and read the info below as needed.
- Welcome
- Course rules (please see the course outline for course rules, including a link to the email rules).
- Please set your OS so that you can see file extensions:
- HTML = semantic meaning
- CSS = appearance
- Brief look at CSS:
- C = The Cascade: for control of style inheritance and rules of precedence when there are conflicting styles.
- Examples of the power of CSS
- Please watch this and read the info below as needed.
- Intro Video 2- (3:07)
- CSS: tremendous possibilities:
- This site uses the same html code with different CSS styles.
- It's hard to believe but it's true! CSS Zen Garden
- CSS: tremendous possibilities:
- Intro Video 3 - (1:47)
- Use these text editors for writing the exercises that you will do for this course, please do not use any others:
- Windows users:
- Start button => Programs => Accessories => Notepad
- Mac users:
- Finder => Applications => TextEdit
- In TextEdit, follow these instructions!
- Windows users:
- Use these text editors for writing the exercises that you will do for this course, please do not use any others:
- IMPORTANT: Please read this before watching the next video:
- Note that I fail to mention Chrome in the video as being an important browser, which it has now become. Feel free to use it.
- To view code with it, click on the 3-bar button in the upper right corner → Tools → View Source
- Or, you can use Option-Command-U.
- If you want to use Safari, Safari version 7 requires you do the following to view source code:
- Launch Safari and be sure you are looking at it.
- In the Safari menu (to the immediate right of the Apple menu) select Preferences.
- Click on Advanced.
- Enable Show Develop menu in menu bar.
- A new menu item will appear: the Develop menu
- Open it and select Show Page Source or Option-Command-U.
- Intro Video 4 - (1:53)
- The HTML file extensions are .html and .htm. They both work, but we will use .html for this course.
- Note that I failed to mention Chrome in the video as being an important browser, which it has now become. Feel free to use it.
- To view code with it, click on the wrench icon on the right side → Tools → View Source
- What happens when you click on a link?
- http - the hypertext transfer protocol - requests an html file from a server which is then sent.
- The browser then displays the html file in its own way, but generally similar to the way other browsers do. There are some exceptions.
- Note that I fail to mention Chrome in the video as being an important browser, which it has now become. Feel free to use it.
The following are exercises that require you to submit homework:
- Intro Video 5 - (7:55)
- Saving an html file.
- MAC USERS!!!
- Very Important:
- You will be using the Mac application TextEdit for much of this course.
- You must change these preferences.
- Very Important:
- This is the first exercise this week.
- A01: - (8:02)
- Saving a new html file.
- You MUST manually add .html at the end of the file name or the browser will not recognize the file.
- Name your file (replace "yourlastname" with your last name):
- yourlastname_A01.html
- I would name my file: vaughan_A01.html
- Lorem Ipsum generator
- Text wrap by default, document flow.
- Spaces and line breaks in code.
- Saving a new html file.
- A02a: - (9:05)
- What are tags?
In the world outside, and also in html, tags identify types of objects,
such as Red-Hot Raspberry Ringer, Butterscotch Bomb, and Peppermint Pizazz. |
This image seeks to illustrate how html tags surround the object that they are identifying. Note that there is no <shoe> tag in html, except those for men's size 14EEE! |
- A02b: - (6:58)
- page title: <title> tag.
- The title is displayed in the browser's title bar, which is the top most row of the entire browser window. It is the same bar that contains the maximize and minimize buttons.
- Search engines often give the words in the title extra "weight" (importance) when determining the order of the links in the results.
- The title is also the default label when bookmarking and appears as the tab name in the browser.
- Save your file as yourlastname_A02.html
- page title: <title> tag.
- A03: - (8:13)
- To refresh a page in Chrome, as in Firefox and Safari, use Ctrl (Mac: Apple-R)
- <p> and <br> tags:
- paragraph and line break
- Use these for basic control of text line breaks.
- By default, the paragraph tag always has an empty row before and after it.
- Save your file as yourlastname_A03.html
- Error in video:
- At ~6:25 I am incorrect in stating that the reason that the <br> line break did not appear was because the browser had put a break there based on the browser width. But this is not true as looking at the video will tell you. Apologies.
- A04: - (7:26)
- Headings 1-6
- Heading 1 is the most important and displayed by browsers larger than the other headings.
- IMPORTANT! Most formatting that a browser will assign to html tags (such as making the text inside h1 tags appear large and bold) can be overridden by css.
- Save your file as yourlastname_A04.html
- Headings 1-6
- A05: - (10:48)
- i, em, b, strong
- Save your file as yourlastname_A05.html
- Note that there is a distinction between the semantic meanings (the type of information) between the <i> and the <em> tags even though browsers will display the contents of both of them in italics (unless, as is the case with tags in general, the browser's own styles are overridden by css). The same is true of the <b> and <strong> tags which both make text appear bold.
- Read the explanation of the distinctions between the four of them.
- Note that I mention xhtml here again as I had in A04. I will be covering the differences between html5 and xhtml later in the course. But just so you know, there are not many differences.
- i, em, b, strong
- A06: - (10:07)
- superscript <sup>, subscript <sub>, <small> (the "big" tag is no longer official)
- Save your file as yourlastname_A06.html
- Superscript is used for things link mathematical exponents and footnote numbers.
- Subscripts are used for the number of each element in a chemical compound.
- <small> is used for what is often called the small print.
- Small print refers to the tiny type you see at the end of a sales pamphlet, the part with all the nasty details they don't want you to know about!
- "The large print giveth, and the small print taketh away!"
- The <big> tag is not a part of the current html5 specifications because text is not commonly referred to as "the big print" or "the big text". There is a <big> tag but it has been deprecated (meaning no longer recommended for use).
- Small print refers to the tiny type you see at the end of a sales pamphlet, the part with all the nasty details they don't want you to know about!
- Corrections:
- In the video I use the term line height when the more proper term is baseline.
- I also used the term table accidentally instead of the term web page.
- superscript <sup>, subscript <sub>, <small> (the "big" tag is no longer official)
- A07: - (2:55) Send me an example using text of your own that has:
- A page title of your own choosing.
- 6 paragraphs using paragraph tags.
- Use a different favorite quotation that is, at most, three or four sentences long as the content of each of the paragraphs.
- Add a brief descriptive header before each paragraph, using h1 for the first and fourth paragraphs and h2 for the other four paragraphs. Don't use the name of the author as the header because of the following...
- Put a break tag before the closing paragraph tag of each paragraph followed by a dash and the name of the author, all in <em> tags so that the name appears as follows:
-Shakespeare
- Save your file as yourlastname_A07.html
- Put all the exercise files in a folder and send it to me in the prescribed fashion.