1. Classes
  2. CMSI 185
  3. Lecture 8T

So What's in a Website?

We all use websites every day... some more complex than others (the websites, not us... though I suppose that's true too?)

That said, using a website is very different from knowing what produces them, and the mechanics that decide their functionality.

Indeed, there are many aspects of careful web design that a programmer must consider to construct a well-functioning site.

List some design aspects that you think a programmer must consider when creating a website.


Indeed, from the list you've made above, you'll likely notice items falling into several categories, each of which we have a different [tool] to address:

  • Structure [HTML]: the structure of a website determines what page elements will be rendered to the user; e.g., sign-in and registration forms, images, containers to visually separate other elements on the page.

  • Appearance [CSS]: the styling and fine-tuning of the display of each page element can be tweaked using a formatting language known as Cascading Style Sheets (CSS). Want to give that box a thick border? Want to make some text red? CSS will help you with that.

  • Behavior [JavaScript]: the interactive or dynamic elements of a webpage can be handled by JavaScript, e.g., submitting a form, changing the visibility of page elements (see below); pretty much anything!

HTML made this question box, CSS made it and its text yellow, and JavaScript... (click on me)

...made this element appear when you clicked!


Note also that, although HTML is primarily responsible for page structure, CSS primarily responsible for appearance, and JavaScript primarily responsible for behavior, there are gray areas where one tool may do the job of another.

For example, some CSS properties can change the structure of a page element and some HTML elements can invoke a certain styling, but we'll look more into that later; for now, this division of labor is a convenient mental image.


HTML

Mercifully, we've talked a lot about JavaScript already, so we know quite a bit about how to code some behavior... but we need to know how it ties into the other "scaffolding" on a webpage.

For that, we'll start by examining HTML.

HTML stands for Hyper-Text Markup Language, and is a standardized system of various "tags" that give structure to webpages by defining their page elements.

Page elements can be anything from containers, text, images, or links (etc.) that are found on a web page.

HTML tags are the components of an HTML document, and describe a page element corresponding to each tag.

Almost all HTML tags have a start tag, end tag, and content (though different tags have different expectations, as we'll see later).

Here are some properties of HTML tags, which we'll spend a good chunk of time learning:

  • The start tag contains the tag name between a less-than and greater than sign like <tagName>

  • The end tag repeats the start tag name, but with a slash following the initial less-than sign, such as </tagName>

  • Content is placed between the start and end tag. The full syntax for most HTML tags is as follows: <tagName>content</tagName>


Tags can be nested (i.e., inner tags compose the content of outer tags) to give more control over page structure.

So, this might look like: <tagName1><tagName2>content</tagName2></tagName1>


In the next sections, we'll look at what tags pertain to what types of page elements, but first, note the following:

Place all HTML document elements inside of the top-level html tag, as follows: <html> ALL PAGE CONTENT </html>


Inside of the top-level html tag, we have a basic division into two primary sub-tags, the head and the body.

We'll examine the denizens of these in the next couple of lectures.


The Body

Did we just transition to anatomy? No! Different body!

The body tag is typically found directly inside of the html tag, and generally holds all content-related page elements.

  <html>
    <!-- other stuff here (covered later) -->
    <body>
      <!-- page content here -->
    </body>
  </html>

The special comment tag is used to document HTML; anything between the tags: <!-- comment here --> will be ignored, but is useful for providing notes in your code to other programmers, or to organize yourself.


What do we mean by "content-related page elements?" Pretty much all text, images, links, etc. that a user of the page will interact with.

Let's look at our first basic body tags (not to be confused with Tag body spray... not that I endorse them or get payed to mention them in lecture... or anything...)


Basic Text Tags

The paragraph tag, <p> ... </p>, is used to create paragraphs of text. Most browsers rendering a paragraph element will add a small amount of space around it for the text to be grouped and legible.

The heading tags are used to create titles of varying size, and range from h1 - h5 by default, like: <h1> ... </h1>, <h2> ... </h2>, etc. with h1 being the largest.

The bold tag, <b> ... </b>, is used to give text inside of it a bold-face.

The italics tag, <i> ... </i>, is used to give text inside of it an italic-face.

There is also an underline tag, but it's largely been outmoded in modern web design, since the underline is usually conotative of a link (which we'll see later).

Try out the following small document!

  <html>
    <body>
      <h1>Big Title!</h1>
      <p>Here is some text!</p>
      <p>Here is some <b>bold text!</b></p>
      <h2>Smaller Title...</h2>
      <p>Here are some <i>italics! wooo!</i></p>
    </body>
  </html>

Layout Tags

The line-break tag, <br/>, consists of only a single tag, and adds a new-line (carriage return) at the position of the line-break tab.

The horizontal-rule tag, <hr/>, consists of only a single tag, and adds a horizontal line-break at its position.

We can see the different effects of these tags below:

  <html>
    <body>
      <p>Here is some text!</p>
      <br/>
      <p>Nice to have some space...</p>
      <hr/>
      <p>Look! I've crossed the line!</p>
    </body>
  </html>

What about lists of things, you might ask?! There are two primary list types: unordered (bullets) and ordered (numbered)

The unordered-list tag, <ul> ... </ul>, creates a list of bulleted items, each contained in a separate, sub-tag, the list-item tag, <li> ... </li>.

The ordered-list tag, <ol> ... </ol>, creates a list of numbered items, each contained in a separate, sub-tag, the list-item tag, <li> ... </li>.

So, lists of items might look like the following:

  <html>
    <body>
      <ul>
        <li>Bullet 1 here!</li>
        <li><b>I'm a BOLD bullet!</b></li>
      </ul>
      <hr/>
      <ol>
        <li>Number 1 here!</li>
        <li><i>I'm an italic number 2!</i></li>
        <li>Just me, #3!</li>
      </ol>
    </body>
  </html>

Tag Attributes

Sometimes we want to customize our tags, or need to provide specifics for how they are intended to function.

Typically, this means we need to add some tag attributes to describe what specifications or customizations we'd like to enforce.

A tag attribute is a name-value pair added to a start-tag that gives it some amount of identification, customization, or functional specification.

The basic syntax of a tag attribute is as follows:

  <!-- For attribute named "attr#" and value named "val#" -->
  <tagName attr1="val1" attr2="val2"> content here! </tagName>

Let's look at some tags that use attributes!

The hyperlink tag, <a href="http://www.fakelink.com"> link here </a> provides a link that, when clicked upon, will open the provided hyperlink reference (often a URL) in the user's browser.

By default, a clicked hyperlink will open the link from the same browser tab as the one on which it was clicked. If you want the link to open in a NEW tab / window on the user's computer, simply set the attribute called target to "_blank" (see below)

The img tag, <img src="http://www.link-to-image.com" />, is a single tag whose src attribute directs the browser to an image to load at the tag's position on the webpage.

Let's try these out!

  <html>
    <body>
      <p>A <a href="http://www.google.com">link to Google!</a></p>
      <p>A <a href="http://www.google.com" target="_blank">link to Google!</a> that opens in a new tab!</p>
      <hr/>
      <img src="https://studentaffairs.lmu.edu/media/studentaffairs/studenthousing/lmu-housing-about.jpg">
    </body>
  </html>

Later, we'll look at how we can make our own tag attributes and look at attrs that can be used universally.


The Head

Well, if an HTML document has a body, surely it must also have... a head!

The head tag, <head> head content </head> contains setup, configuration, and information about the webpage, and precedes the body tag below the top-level html element.

So, any HTML document should *really* look like:

  <html>
    
    <head>
      <!-- head content here -->
    </head>
    
    <body>
      <!-- page content here -->
    </body>
 
  </html>

So what goes in the head? Brains of course, unless you're in K'tah!...

That said, we're going to look more at what goes on in the head in future lectures... for now, here's a simple tag we can place within to configure our pages:

The title tag, <title> Page Title </title> decides what title will be displayed at the top of the browser tab.

On this page, the title is "Andrew Forney - LMU CS", but for example, I could say:

  <html>
    
    <head>
      <title> Andrew's K'tah! Fansite </title>
    </head>
    
    <body>
      <!-- page content here -->
    </body>
 
  </html>

We'll see more stuff that can go in the head later!


HTML Practice

Here are some useful tidbits for how to code in HTML and play around with it!

CodePen has a panel in which you can place HTML and play around to see how it renders! Try some of our examples there!

In Google Chrome (and some other browsers) right-clicking on a page element and selecting "Inspect element" will bring up all of the HTML that is being used to render the page you see!

This is actually much cooler than you might think; not only can you view how to style your own code (Chrome will re-organize it with proper indents for you), but you can also view OTHER peoples' HTML and see exactly how they did what they did. You can also make changes directly to the HTML and see how they work!


Workflow

So what should your workflow be for creating a webpage? Pretty much the same as when making a JavaScript... script.

  1. Choose your favorite text editor, and make a new file. To create an HTML document, save the file as something.html (the .html is the important part).

  2. Make edits to your web page.

  3. When you're ready to view it, you can: (1) find the file in your file system, right click, and choose "Open with" to select a browser (like Chrome or Safari); (2) go into your web browser and choose Open, and then navigate to your HTML document. This will preview how it looks in a real browser!

  4. If you've made changes to the HTML document and want to see those changes in the browser, simply refresh the page!


  PDF / Print