Ex02 Part 1: HTML

HTML Elements

Each element is rendered on screen in the order it appears in your code. This is know as the “flow.”
Most elements have an opening and closing tag, with some content in between.
<p>This is paragraph text.</p>
A few elements are “empty” that is, they are self closing:

<hr /> horizontal rule <br /> line break

Elements can be nested within each other, from the largest and most general to the smallest and most specific. Each element must be closed after each element within it has been closed.

<div> <p>This is the first paragraph within this div.</p> <p>This is the second paragraph within the div.</p> </div>

Block vs Inline Elements

Block elements by default cause a line break. That is, elements following will appear on a new line in the browser. (CSS styles can override this behavior.) Block elements can have a width and height applied to them with CSS.
Inline elements by default do not cause a line break. That is, elements following will appear on the same line in the browser, as long as there is room. If there is no room, the element will flow to the next line. (CSS styles can override this behavior.)

From: Girl Develop It

Structural

Structural elements determine the hierarchical importance and flow of the page, while also giving meaning to the content within.

Structural (block)

<div> divisions <h1> through </h6>> <h6> headings <p> paragraphs <ol>, <ul> and <li> lists and list items <blockquote>

Structural (inline)

<b> bold <i> italic <a> anchor (links)

DIV vs SPAN

DIVs are block level containers that can group elements together into sections.
SPANs are inline elements that can be used to apply CSS to parts of elements.

Semantic

Semantic tags give extra meaning to content, like where to place <em> emphasis in a sentence. HTML5 contains semantic elements that define the meaning of different parts of a page:

<header>
<nav>
<main>
<section>
<article>
<aside>
<figure>
<footer>

Element Attributes

HTML elements can have attributes, which provide additional information about that element. Attributes are always specified in the start tag. Attributes come in name/value pairs like: name="value"
Examples:

<div id="sidebar"> <a href="http://twitter.com/djlicata">Follow me on Twitter.</a>
   <img src="images/twittericon.png">
<div>

These attributes can be applied to any HTML element:

  • class – one or more class names
  • id – a unique identifier for that element
  • style – an inline CSS style
  • title – extra infor that shows up as a tooltip

For a complete list of HTML elements and available attributes, see MDN’s HTML5 Reference.

Create a Simple HTML Structure

Instructions

  1. Copy the HTML code below, then paste it into a new Atom document titled index.html. Save it into a folder titled yourlastname-ex02.
<!DOCTYPE html>
<html>
   <head>
     <meta charset="UTF-8">
     <title>ART 320 Exercise 02</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="style.css" rel="stylesheet">
   </head>
   <body>
   </body>
</html>
  1. Save index.html.
  2. Create elements and attributes for the following modules of the page:
    • wrapper – contains all elements
    • header – contains a <nav> element and a <div id="banner"> containing <img src=”images/banner.png” alt=”banner” />
    • The <nav> element contains four <li> elements inside a <ul>: home, about, gallery and contact.
    • Beneath the header flow two elements <main> and 
    • Copy this code and paste it within your <body> tags:

     <div id="wrapper">
        <header>
           <nav>
             <ul>
               <li><a href="index.html" title="Home">Home</a></li>
               <li><a href="about.html" title="About">About</a></li>
               <li><a href="gallery.html" title="Gallery">Gallery</a></li>
               <li><a href="contact.html" title="Contact">Contact</a></li>
             </ul>
           </nav>
           <div id="banner"></div>
         </header>
         <main>
           <h1>Main section</h1>
           <p>Sample main content text.</p>
         </main>
         <aside>
           <h2>Sub-section</h2>
           <p>Sample sidebar text.</p>
         </aside>
     </div> <!-- close wrapper -->
  1. Insert an image and two paragraphs of text into the main content area. In the next part, CSS, we will float it to the left and wrap the text around it on the right.
    • Copy 2 paragraphs about kittens within the <p> tags of the main section.
    • Copy it into a new folder named “images” inside of your Ex02 folder.
    • Type this code within your text, using the correct image filename:
    • <img src="images/kitten.jpg" alt="a fuzzy kitten" />

> Continue to Part 2