ENG 201 5.W: HTML Primer

Today’s Plan:

• Intro to HTML
• Homework

Intro to HTML

We’re going to work with HTML and CSS over the next few weeks, while you are engaged in your personal learning projects. Think of HTML and CSS in terms of content and form. We use HTML tell a browser about our content, and CSS to tell the browser how to present that content (layout, colors, typography, etc).

We are going to work with bare bones editors in class. Of course, there are powerful programs like Adobe Dreamweaver that make it “easier” to code (because they are doing a lot of the work for you). We aren’t going to go that route, because I want you to learn how to code from the ground up. Learning the fundamental principles of HTML will help you understand how the Internet works and prepares you to learn other languages–CSS, XML, etc. So, to get started, you need to open Notepad++ (if working on a PC) or Komodo Edit or BBEdit on a mac (30 days for free).

The Parts of Speech

HTML languages operate on a simple premise–content gets tagged. Tags open and close. Every piece of content on a page has to have an opening and closing tag. For instance, this paragraph looks like this:

<p>HTML languages operate on a simple premise–content gets tagged. Tags open and close. Every piece of content on a page has to have an opening and closing tag. For instance, this paragraph looks like this:</p>

That illustrates the most basic tag in html, <p> or “paragraph” tag. Don’t read paragraph too literally. The paragraph tag is used for any amount of basic (non-heading, non-listed) text.

Let’s take a look at what some “naked” HTML looks like in a browser. If, in Chrome, we go to view > developer > view source we’ll see something like this:

So, what do we see in that screen capture? Well, we see all of the basic tags. We can think of this as the basic parts of speech for speaking HTML:

• html & head: in lines 2 and 3, the html and the head tag appear. The html tag contains information for the browser. The head tag opens here. When looking at a web page, you can’t see any part of the head (with the exception of the title field). The head provides information for the browser to process the page. Including:
  • Doctype: The first line in the code is the DOCTYPE. This tells your browser what kind of code it is looking at. Whenever you start a new page, you can copy and paste this DOCTYPE line. For this class, we’ll be coding in the doctype xhtml 1.0 strict.
  • Title: The title tag determines what appears in the tab in your browser
  • Metadata: This is information for search engines (lines 5-7)
  • CSS: Lines 8-10 contain links to the cascading style sheet and google fonts; this is styling information. We’ll deal with CSS in our next class.
• body: Notice that the head closes in line 13 and the body opens in line 14. The body contains:
  • content tags: all the content in a page basically appears in one of the following tags:
    • p – your basic paragraph tag. Use this for any text information
    • h1, h2, h3 – different headings. The h1 is the page’s main heading, h2 indicates a sub-heading, h3 a more minor heading.
    • ul & li – ul opens an unordered list, li puts an item in that list. Lists are a bit more tricky than paragraphs, but easy once you get the idea. Look at lines 29-38 to get an idea of how a list works (the unordered list opens, all the line items open and close, the unordered list closes)
    • img – check out line 53 for an example of how to insert an image
  • semantic tags – these tags reinforce/augment the meaning of text. It is your basic bold and italics. These tags have to appear within content tags (for an example, look at lines 50 or 55 of this page’s code–first the p opens, then the strong opens, then the content, then the strong closes, then the p closes.
    • em
    • strong
    • cite
    • blockquote
  • structural tags – throughout this page’s code, you’ll notice the following tags. Ignore them for now–they are structural tags that identify content for styling. Essentially, you use structural tags like the div or span tag to target specific content in your CSS sheet. Depending on how the next few weeks go, we might talk about CSS and structural tags later in the course–but for now you can basically ignore them.
    • div
    • class
    • span

I know the above reading is probably not too helpful for those of you just starting to code; so I want you to try and practice coding a document. Let’s jump into Notepad++, open a new document, and start coding. We need to:

• Open close html
• Open close the head
• Open close the body
• Put a title into the head
• Put a metadata description in the head
• Put a metadata keywords in the head
• Open your sample page, copy/paste all the content in the resume into the body
• Save the file
• Preview the file
• Apply some tags (h1, h2, p)
• Save preview
• Apply some more tags (ul li)
• Save preview
• Apply some more tags (strong, em)
• We are not going to build a fracking table today.

Homework

Keep working on your project 2.

Read Katz’s article Ethic of Expediency. Pay particular attention to the epigraph at the very beginning. Answer two of the four questions on Canvas.