CIS195 Web Authoring 1: HTML

More Basic HTML Elements

Topics by Week for the Eight-Week Term
1. Intro to HTML	5. Layout with CSS
2. More HTML, file paths	6. HTML Tables
3. Site structure and navigation	7. HTML Forms
4. Formatting with CSS, Midterm	8. Multimedia, Final

Topics by Week for the Ten-Week Term
1. Intro to HTML	6. Layout with CSS
2. More HTML, file paths	7. CSS Flexbox and Grid
3. Site structure and navigation	8. HTML Forms
4. Formatting with CSS	9. Multimedia
5. Midterm, Project Propposal	10. Tables, Project Completion
	11. Final

Q and AReviewChecking Your CodeVisual Studio CodeW3C Syntax ValidatorIn-line and Block ElementsNested ElementsNesting RulesNested ListsMore HTML Elements FiguresBlock QuotesCiteSpecial CharactersCommentsHorizontal RuleReferences

Q and A

Any questions about anything?
Review due dates.

Review

Empty web site skeleton:


<!DOCTYPE html>
<html lang="en">

<head>
    <title>Skeletal Page</title>
    <meta charset="UTF-8">
</head>
  
<body>
  This is an empty web page.
</body>

</html>

HTML elements you've learned so far:

Line break:<br>
Paragraph: <p>
Image: <img>
Anchor (hyperlink): <a>
Lists:<ol> and <ul>
Text style: <strong>or <b> and <em> or <i>
Headings:<h1>, <h2>, <h3>, etc.

Checking Your Code

Visual Studio Code

VS Code will automatically let you know if you make mistakes (use wrong syntax) in your HTML code. It does this by turning the code where it detects the error red.

HTML_syntax_error

W3C Syntax Validator

Define "syntax"

W3C HTML Validator

In-line and Block Elements

In-line elements arrange themselves horizontally on the page. Examples are:

Hyperlinks:<a>
Formatting, like:<strong>, <em>, etc.
Images:<img>

Block elements arrange themselves vertically on the page. Examples are:

headings: <h1>, <h2>, etc.
paragraph: <p>
lists: <ul> and <ol>

Nested Elements

Some elements can be nested, placed inside, other elements. You've already seen that in the basic skeleton of a web site where the body and head are nested inside the html element. To make the code easier to read, we indent the nested elements.
Here's an example:


<p>
  This is a <i>paragraph</i> with some <b>nested</b> elements inside it.<br>
  <a href="https://example.com">This is nested inside the paragraph too.</a>
</p>

Nesting Rules

The opening and closing tags of a nested element must be between (inside) the opening and closing tags of the outer element.
Inline elements cannot contain block elements.
Some block elements cannot contain other block elements.
Check the Permitted Content in the MDN HTML Element reference.
- paragraph, <p>, elements can only contain phrasing content.
- headings, <h1>, <h2>, etc. can only contain phrasing content.
- lists, <ol>, or <ul> can only contain <li> elements.
- list items, <li> elements can only contain flow content.

Nested Lists

Lists can be placed within lists. The right way to do it is to put the nested list inside a li element of the parent list. For example:


<ul>
   <li>Deserts
     <ul>
         <li>Pie</li>
         <li>Cake</li>
        <li>Ice Cream</li>
      </ul>
  </li>
  <li>The rest of the list</li>
</ul>

In a browser, the nested lists would look like this:

Deserts
- Pie
- Cake
- Ice Cream
The rest of the list

More HTML Elements

Figures

Figures are used to change images from inline to block elements. They also allow you to add a caption to the image.


<figure>
  <img
     src="https://developer.mozilla.org/static/img/favicon144.png"
     alt="The Mozilla Developer Netowrk logo">
  <figcaption>MDN Logo</figcaption>
</figure>

Try it out: Figure on W3Schools

Block Quotes

The block quote element will:

Indent the text
Put blank lines above and below the text


<blockquote>
  Not all who wander are lost.
</blockquote>

In a browser the blockquote would look like this:

Not all who wander are lost.

Try it out: Blockquote on W3Schools

Cite

Use this element to cite the work of someone else.


from "The Riddle of Strider" in <cite>The Fellowship of the Ring</cite> by J.R.R. Tolkien

If we put this inside the block quote, it will look like this in the browser

Not all who wander are lost.
from "The Riddle of Strider" in The Fellowship of the Ring by J.R.R. Tolkien

Special Characters

Certain characters are not allowed (reserved characters) in HTML. For example, if you use the less than, <, or greater than, >, signs in your text, the browser is likely to see them as tags. The solution is to use character entities to display reserved characters. The code below shows two ways to write the character entities for < and >