Emily Kauffman

Back to teaching

CIS 275 Lecture 7: Additional Markup and Review

Goals

  1. Learn some new tags
  2. Review

Comments

  • comments are not visible in the browser
  • so why might you use them?
  • help you to remember why you did something
  • can be used to mark the end of long sections
<div id="container">
	<div id="section1">
		some code
	</div><!-- end of section1 -->
	<div id="section2">
		some more code
	</div><!-- end of section2 -->
</div><!-- end of container -->

ID and Class Attribute

  • everyone element can have id and/or class attributes (global attributes)
  • IDs - must be unique
  • class - can be applied to multiple elements
  • will be more useful when we do CSS - allows you to style elements a certain way
  • class attribute should describe the class it belongs to
  • elements can have multiple classes
<div id="intro"></div>
<div class="section"></div>
<div class="section last-section"></div>

Block Elements

  • elements that start on a new line
  • examples: <p>, <h1>, <ul>, <div>

Inline Elements

elements that continue on the same line as their neighbors

  • examples: <a>, <img>, <span>, <em>

Divs

  • allows you to group a set of elements together
  • creates a section on a webpage
  • block element
  • using an ID or class on a div means that you can specify what it looks like with CSS
  • can make code look cleaner
  • vital for layout
  • ex: https://emilykauffman.com/teaching
<!-- without divs -->
<h1>Information about Earth</h1>
<p>some info about geography</p>
<p>some more info about geography</p>
<h1>History</h1>
<p>some info about the history</p>
<p>some info about the geology</p>
<p>some more info</p>
<!-- with divs -->
<div>
    <h1>Information about Earth</h1>
    <p>some info about geography</p>
    <p>some more info about geography</p>
</div>
<div>
    <h1>History</h1>
    <p>some info about the history</p>
    <p>some info about the geology</p>
    <p>some more info</p>
</div>

Span

  • like a div, but inline
  • use when there are no semantically better elements that fit
  • use case: say you want an element that is always highlighted with a yellow background
<!-- requires some CSS -->
<p>Here is how to make something <span class="highlighted">highlighted</span>
/* CSS uses the class to target the element and apply styles */
.highlighted {
	background-color: yellow;
}

Meta tags

  • contains information about the web page
  • not visible to users, but used by browser
<meta name="author" content="Emily Kauffman" />
<meta name="robots" content="nofollow" />
<meta name="description" content="description of the website" />

In Class Exercises/Test Prep

Homework

Due: Feb 20

As we begin to move into CSS, this exercise will give you the opportunity to create an HTML template that you can use later to easily dump content into, and work through the CSS. In other words, through this exercise you’ll develop a starting point where you can always return without having to look up all the typical HTML syntax over and over again. To successfully complete this assignment, you should exhibit mastery of all the items addressed in Exercises 1 & 2, and you should also be able to:

  1. Create a comprehensive HEAD section with common META tags
  2. Generate carefully edited HTML with absolutely no errors
  3. Incorporate the HTML5 structural elements into the BODY section
  4. Understand what DIVs/SPANs are and be able to implement them accordingly

There isn’t a grade for this – we will review each other’s work in class. But, carefully completing this exercise will make your life much easier for the remainder of the term and it will also reduce the overall amount of work you have to do for the upcoming exercises and projects.

Here's what you should do: Generate one, truly beautiful, HTML file. Make sure there are absolutely no errors in it. This means that you should go through the troubleshooting process that we outlined in class, including running your file through a validator.

Your file should include:

  1. All of the common and frequently used META tags.
  2. Most (if not all) of the HTML structural elements.
  3. Your best effort at generating a navigation structure.
  4. Careful commenting of your code so that you understand what each section of the file is doing.
  5. Some fake content (think Lorem Ipsum text) so that you can see what goes where when you are opening the file in a browser (https://loremipsum.io/ultimate-list-of-lorem-ipsum-generators/).

All markup for this project should be in accordance with the HTML5.2 specification.

Next Class

  • Exam #1!
  • Homework: Homework #3 DUE ON THE 20th, not on the 18th.
  • Extra credit: Visit a PAL tutor during hours. Have them sign a piece of paper with their name and date. Write down what they helped you with. Give it to me for a bonus point toward something.
  • Optional practice: Make a codecademy.com account (free) and start the HTML track.