Ex01: Intro to HTML and CSS

With the Zoom Recorded Screencasts:

Files for Exercise:

ex01 Resources

Overview

In this exercise we will use basic HTML elements and CSS style rules to create two web pages: a home page that links to a second page containing a Mondrian-like graphic, generated with CSS.

WWW Background

The World Wide Web was invented by Tim Berners-Lee in 1989 as a method of transmitting formatted text and images over a global network of computers. It’s publishing language, Hypertext Markup Language (HTML) was described by Berners-Lee in 1991. Users of computers on the Internet known as Clients, request Web pages from other computers designated as Servers. The Server sends the HTML page (structure) along with a CSS document (style) and any embedded images and media files. The client’s Web Browser renders the HTML data and embedded media into a visual display formatted according to the data in the CSS file.

Atom Text Editor

Atom is a text editor favored by many web developers. Code coloring helps to identify typos and other errors.

Optional: Read this SitePoint article on Atom tips and shortcuts. TO create a frequently used shortcut to auto-indent your lines of code:

Go to Atom > Keymap (Mac) or File > Settings > Keybindings > Keymap (Windows/Linux) and paste the following for Mac:

'atom-text-editor':
    'ctrl-cmd-]': 'editor:auto-indent'

or this for Windows/Linux:

'atom-text-editor':
    'ctrl-}': 'editor:auto-indent'

HTML

HTML is plain text consisting of tags which define the content of a page. Tags define the elements which make up the structure of the page and the content.

Watch “Don’t Fear HTML” about understanding tags.

Structural tags, like <h1> through <h6> headings and <p> paragraphs define the hierarchical flow of elements on a page. Hierarchy refers to a logical progression of the importance of items on a page – <h1> is the most important headline; <h2> second most important; and so on.
Semantic tags define extra info, like where to place <em> emphasis in a sentence.

Most elements begin with an opening tag, like <p> preceding some content, and then ends with a closing tag, </p>.

A few elements do not have content between the tags. They are called empty elements and written differently:

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

Structure – Not Style

Even though each browser has a default way of rendering the look of a tag <h1> heads are the largest and boldest, <h2> is smaller, and so on) HTML tags must not be used to define the look of content (style.) Instead, tags define the semantic structure of a page, outlining the relative importance of each chunk of information being presented: <h1> elements are the most important, <h2> elements are secondarily important, and so on. This is crucial for accessibility — allowing a screen reader to assist a blind person’s understanding of the information.

Required HTML Page Elements

Every HTML page is structured with these required elements:

<!DOCTYPE html>
<html>
     <head>
     </head>
     <body>
     </body>
</html>

The first line must begin with <!DOCTYPE>. This is not an HTML element, but it tells the browser what language it’s about to read. We use <!DOCTYPE html> for HTML5.

The data within the <html> tags makeup the HTML document.

The data within the <body> tags contain the content that will be visible in the browser window.

Common HTML elements:

Most HTML elements are either block level or inline. Block level elements usually start and end with a new line in a browser. Inline elements are displayed without starting a new line.

Block Level Elements

(Start on a new line and cause a new line to be created at the close.)

<h1> through <h6> Head 1 through Head 6
<p> paragraph
<ul> unordered list (bullets)
- contains <li> list items
<ol> ordered list (numbered)
- contains <li> list items
<dl> definition list
- contains <dt> terms and <dd> descriptions
<div> division (container)
<table> array of data, like a spreadsheet
<tr> table row
<td> table data

Inline Elements

(Do not cause a line break.)

<em> emphasis, or implied importance (looks like italic)
<i> italic – looks like emphasis, but semantically implies “an alternate voice or mood.”
<strong> implies extra importance (looks like bold)
<b> looks like bold, but semantically used “to be stylistically offset from the normal prose without conveying any extra importance.”
<span> range of selected text, commonly used to apply a define a class to which a style can be applied
<a> anchor (links)

<IMG> TAG

The <img> or image tag, defines a placeholder for a referenced image file. It behaves both like an inline element and a block element. It flows inline like text, but can have a width and height like a block element.

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

File Naming Considerations

HTML file names must not contain spaces or punctuation other than a hyphen, underscore, and period.

The “home page” of a website must always be named “index.html”, and be located at the top level of the Sites folder.

All files, including HTML and media/image files, must have an appropriate suffix, such as .html, .jpg, .gif, .png, etc.

CSS

Cascading Style Sheets (CSS) is a set of formatting rules that determine the look and position of HTML elements on a page.

CSS rules are applied to HTML elements based on selectors and declarations.

Selectors determine which HTML element a style should be applied to, such as:

tags:<p>
classes: can be applied to any element, such as <span class="boldRed">. In the CSS, class names begin with a dot, such as .boldRed.
IDs: specify a style for a single, unique element, such as <div id="MainContent">. In the CSS, class names begin with a #, such as #MainContent.
pseudo-classes: add custom looks and behaviors to certain selectors, such as a property when the mouse is hovered over a link, or the style of a visited link.

Selectors may also be grouped and nested within each other. Both block level and inline elements can contain any number of classes, and selectors may define certain classes that are only within other classes. Rules can be applied in very complex and powerful ways in both broad and very focused ways.

Declarations consist of a property and a value. The property is the style attribute (like color or margin) that you wish to change. Each property has a value (like “red” or “20px”).

Common CSS properties:

color
text-align
line-height
font-family
font-size
font-style
font-weight
background-color
background-image
background-repeat
list-style-type
margin
padding
border
float
clear

For a complete list of CSS properties, see MDN’s CSS Reference.

Hyperlinks

Hyperlinks, or <a> anchor tags, are the heart of HTML. Clicking a link sends a request to a web server to send a different page (or part of a page) to the browser. The structure of a link contains the address, or the path to the location of the new page, in the form of a URL, which exists either on the same website or on a different site altogether.

<a href="artists/abstractexpression/kandinsky.html">Walter Kandinksy</a>

If the location of the linked page changes, or if it’s name is changed, the link must be updated to reflect the new path, otherwise a 404 (Page Not Found) error will result.

Instructions

Create the HTML Structure

Launch Atom and create a New file. Save it as index.html into a folder on your desktop named yourlastname-ex01.
Copy the HTML code below, then paste it into your index.html document.

<!DOCTYPE html>
<html>
   <head>
     <meta charset="UTF-8">
     <title>ART 320 Exercise 1</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="style.css" rel="stylesheet">
   </head>
   <body>
   </body>
</html>

Save index.html.
Content will later be added between the <body> tags.

Create the CSS formatting

Create a new file in Atom. Save it as style.css into your folder.
Copy the CSS code below, and paste it into style.css.

/* CSS Document */
/* Universal Selector Reset cssreset.com */
* { margin: 0; padding: 0; }
/* End Reset */
body {
   background-color: #d5d7ff;
   text-align: left;
   font: 11px/1.1em "Lucida Grande", Lucida, Verdana, sans-serif;
}
h1 {
   font-size: 1.5em;
   color: #639;
}
h2 {
   font-size: 1.3em;
   line-height: .5em;
}
h3 {
   font-size: 1.1em;
}
#header {
   width: 900px;
   top: 10px;
   right: 20px;
}
#content {
   width: 900px;
   top: 100px;
   right: 20px;
}
#navbar {
   background-color: #000;
   padding-top: 3px;
   width: 900px;
   height: 40px;
   top: 40px;
   right: 20px;
}
li.nav {
   font-family: "Courier New", Courier, monospace;
   font-size:13px;
   white-space: nowrap;
   display: inline;
   list-style-type: none;
   padding-right: 1.5em;
}
li.nav a {
   color: #FFFFFF;
}

Note that colors in HTML and CSS are usually specified in hexadecimal notation, though certain names can also be used. By using numbers from 0 – 9 and letters from A – F, a pair of characters in Hex code can equal a value from 0 – 255. Three pair of characters represent the amount of Red, Green and Blue in a color. (Occasionally pairs with repeating characters will be simplified from six character codes to three – e.g. #00BBFF becomes #0BF.) Image editing programs can give you the Hex value of a color.
Change the background color for the <body> element to a hex color of your choosing.
Save style.css.

Create Content

Copy and paste the code below into your index.html file, between the <body> tags. (Code appearing within the  tags are comments – instructions for you that will not show on the page.)

<div id="header"> <!-- Contains the page headline -->
<h1>Welcome to my ART 320 Exercise 1 site!</h1>
</div>
<!-- end header -->
<div id="navbar"> <!-- Contains a list of site navigation links -->
<ul>

<li class="nav"><a href="index.html">Home</a></li>
<li class="nav"><a href="cssmondrian.html">CSS Mondrian</a></li>
</ul>
</div> <!-- end navbar -->
<div id="content"><!-- Place a few sentences of something goofy here.-->
<h2>Here is Something Goofy</h2>
</div> <!-- end content -->

Save and close index.html.

CSS Mondrian

Adapted from googlecreativelab.github.io

Use Developer Tools (or Inspect Element) to preview the end result:
- Right-click on the Mondrian to reveal HTML and CSS Source code. (If using Safari for the first-time, go to Preferences>Advanced and click to “Show Develop Menu”. This step is not necessary in other browsers.)
- Arrange the code inspector to show HTML and CSS code side by side.
- Mouse-over different lines of code and notice which areas of the design become highlighted.

Save file index.html then duplicate it by choosing File>Save as… and name it cssmondrian.html, into the same folder as index.html
Open UBbox ART 320 Downloads and find the ex01 Resources.
View the file for Mondrian’s Composition with Red, Blue, and Yellow.
The supplied sketch (measurements.jpg) has converted the painting into a grid with calculated measurements, based on an overall size of 400px.
Open your style.css file and paste in the following code:

#painting {
margin-left: auto;
margin-right: auto;
margin-top: 100px;
width: 400px;
height: 400px;
background-color: #fff4db;
box-shadow: 10px 10px 0px #8d8d8d;
}
Open cssmondrian.html and delete the lines within the “content” divs.
Add the below code to cssmondrian.html between the “content” divs:

<div id="painting"></div>
Create divs based on an analysis of the painting. Each row, column and box will have it’s own unique CSS #id and a corresponding HTML div. Starting with the top row we see one large box on the right and two smaller boxes stacked vertically on the left, each separated by black dividers. In the CSS, add the following rule:

#toprow {
height: 290px;
}

Note that #toprow won’t be visible – it serves as a container for the other boxes in that row.
Between the #painting tags in the HTML, add:

<div id="toprow"></div>
An easily reusable color palette can be created by creating variables for each color. Global variables can be used throughout your CSS, and can change based on screen size (more on Responsive Design in Exercise 2)In the CSS, add the below rules:

:root {
--red: #ff6f69;
--blue: #3e42ec;
--yellow: #eee352;
--black: #535054;
}
Make the large box by first adding the below rule to the CSS:

#bigbox {
height: 290px;
width: 290px;
background-color: var(--red);
}
Between the #toprow tags in the HTML, add:

<div id="bigbox"></div>
A note about floats: Most elements can have a float style applied to them via CSS. A float changes the behavior of a block level element – it removes the line break and causes the element to flow in-line, either to the Left or the Right.”Float” the box to the right. First, create a .right class whose float property has a value of “right”:

.right {
float: right;
}
Then apply the .right class to #bigbox:

<div id="bigbox" class="right"></div>
Add the below code to the CSS to create #divider1:

#divider1 {
height: 290px;
width: 10px;
background-color: var(--black);
}
After the #bigbox div in the HTML, add:

<div id="divider1" class="right"></div>
The #topleftcolumn will contain three stacked boxes: two with the .mediumbox class and one horizontal #divider2 between. Note that #topleftcolumn won’t be visible – it serves as a container for the other three boxes. Create the below CSS:

.mediumbox {
height: 140px;
width: 100px;
}

#divider2 {
height: 10px;
width: 100px;
background-color: var(--black);
}

After the #divider1 div in the HTML, add the below code. Pay attention to the nesting of the three boxes within the #topleftcolumn div:

<div id="topleftcolumn" class="right"> 
  <div class="mediumbox"></div> 
  <div id="divider2"></div> 
  <div class="mediumbox"></div> 
</div>

The #middlerow div comes next. It flows after #toprow div:

<div id="middlerow"></div>
Create the CSS for the #middlerow, and continue to fill in the #bottomrow using what you’ve learned.
When completed, submit your folder, named with your last name first, to UBbox ART 320 – Uploads> Exercise 01 Submit.