Web Design

The Web

HTML	Meaning and Content
CSS	Presentation & Style
JavaScript & jQuery	Scripting, manipulating the DOM

Excellent resource: W3 Schools

Hypertext Markup Language

Markup language → Description language
Rendered by web browsers, etc.
Early 1990's by Sir Tim Berners-Lee
International standard: HTML5
Constantly evolving

Document

Source code text file (.html)
Returned by a web server in response to a HTTP request
Can just open a .html file locally
"View Page Source" in any browser

Element Structure

HTML elements are essential building blocks of an html document.

Required Elements

<!DOCTYPE html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Page Title</title>
    </head>
    <body>
    
    </body>
</html>

Additional Elements

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

W3C Standard

Great Cheat Sheet in Canvas

Overall great resource: W3 Schools Tutorials

Elements

<h1>Heading level One</h1>

<h2>Heading level Two</h2>

<h3>Heading level Three</h3>

<h4>Heading level Four</h4>

<h5>Heading level Five</h5>

<h6>Heading level Six</h6>

Heading Elements

The Paragraph element

<p> > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Groups sentences and sections of text together.
Configures empty space above and below the paragraph

Line Break element

Stand-alone tag
Called a void element in HTML5
Causes the next element or text to display on a new line

…text goes here <br> This starts on a new line….

Horizontal Rule element

void element

<hr >

Configures a horizontal line on the page

Common Phrase Elements

Indicate the context and meaning of the text
Display inline with the text

<b></b>

Text is displayed in bold font

<strong></strong>

Text has strong importance and is displayed in bold

<i></i>

Text is displayed in italic font

<em></em>

Text has emphasis and is displayed in italic font

Nesting Phrase Elements

Phrase elements can be used together to provide different styling within a paragraph

<p><i>Call for a free quote for your web development needs: <strong>888.555.5555 </strong></i></p>

List Basics

Unordered List Element

Displays information with bullet points

<ul></ul>
Contains the unordered list

List Item Element
<li></li>
Contains an item in the list

Ordered List Element

Conveys information in an ordered fashion

<ol></ol>
Contains the ordered list

type attribute determines numbering scheme of list
default is numerals

List Item Element
<li></li>
Contains an item in the list

Description List

The Description List element
<dl></dl> tag
Contains the definition list

The dt Element
<dt></dt> tag
Contains a term or name

The dd Element
<dd></dd> tag
Contains a definition or description
Indents the text

Uses:

Display a list of terms and descriptions
Display a list of FAQ and answers

Structural Elements

The <div> Element

Purpose:

Configure a specially formatted division or area of a web page
Block display with empty space above and below the div
Can contain other block display and inline display elements

<body> Structure Elements

Example:

<body>

<header> document headings go here </header>

<nav> main navigation goes here </nav>

<div> main content goes here </div>

<footer> document footer information goes here </footer>

</body>

The anchor element

Inline display element
Specifies a hyperlink reference (href) to a file
Text between the <a> and </a> is displayed on the web page.

◦

href Attribute

Indicates the destination of the hyperlink
Web page document, photo, pdf, etc.

Absolute link

Link to other websites

<a href="http://yahoo.com">Yahoo</a>

Relative link

Link to pages on your own site
Relative to the current page

<nav>

</nav>

Layout Algorithm

HTML elements have default display values depending on the type of element.

Two categories of elements:

Block Level Elements: Always start on a new line, they stack vertically
Inline Elements: Appear to continue on the same line as their neighboring elements, placed horizontally until the end of the line

Block Level Elements

Examples include

`<form>`	`<p>`	`<table>`	`<hr>`
`<h1>`	`<ol>`	`<li>`	`<div>`

div tag element

<div class="myDiv">
  <h2>This is a heading in a div element</h2>
  <p>This is some text in a div element.</p>
</div>

Simple example

<div class="myDiv">
    <h2 style="color: red;">This is a heading in a div element</h2>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
      <li>Yummy Cheescake</li>
    </ul>
    <p>This is some text in a div element.</p>
  </div>

More complex example

Inline Elements

Examples include

`<a>`	`<em>`	`<strong>`	`<img>`
`<sub>`	`<button>`	`<input>`	`<span>`

inline tag elements

<p>My mother has <span style="color:blue">blue</span> eyes. Her name is 
  <em>Isabella</em> and she has the <strong>cutest</strong>
  dog named Jezzie!</p>

HTML Attributes

HTML attributes provide additional information about elements
HTML attributes are always specified in the start tag
HTML attributes usually come in name/value pairs like: name="value"

Element Attributes

<a href="https://www.w3schools.com">Visit W3Schools</a>

<img src="img_girl.jpg">

<img src="img_girl.jpg" width="500" height="600">

<img src="img_girl.jpg" alt="Girl with a jacket">
<img src="img_typo.jpg" alt="Girl with a jacket">

<p style="color:red;">This is a red paragraph.</p>

<html lang="en"></html>
<html lang="en-US"></html>

<p title="I'm a tooltip">This is a paragraph.</p>

HTML Attribute Reference

id Attribute

A global attribute. Used to uniquely identify an element (from CSS or Javascript).

Common use of id attribute

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

Output from the id attribute code

class Attribute

Used to make this element a member of a named class. Also a global attribute.

Common use of class attribute

<!DOCTYPE html>
<html>

  <head>
      <style>
          .city {
              background-color: tomato;
              color: white;
              border: 2px solid black;
              margin: 20px;
              padding: 20px;
          }
      </style>
  </head>

  <body>

      <div class="city">
          <h2>London</h2>
          <p>London is the capital of England.</p>
      </div>

      <div class="city">
          <h2>Paris</h2>
          <p>Paris is the capital of France.</p>
      </div>

      <div class="city">
          <h2>Tokyo</h2>
          <p>Tokyo is the capital of Japan.</p>
      </div>

  </body>
  
</html>

Output from the class attribute code

Tutorials &

IDEs

Integrated Development Environments

<h1>Heading 1 </h1> 
<h2>Heading 2 </h2>
<h3>Heading 3 </h3>
<h4>Heading 4 </h4>
<h5>Heading 5 </h5>
<h6>Heading 6 </h6>

<p>Some text in a paragraph.</p>

<ol>
  <!--This is a comment -->
  <li>First item</li>
  <li>Second item</li>
</ol>

<ul>
  <!--This is a comment -->
  <li>First item</li>
  <li>Second item</li>
</ul>
	<!--Absolute Link - link to other pages-->
<a href="https://www.google.com">Link to Google</a>
	<!--Relative Link- link to a page within your site-->
<a href="index.html">Home Page</a>"
	<!--EMPTY Elements-->
<br>
<img src="SuperCoolPic.jpg" alt="SuperCoolPic" width="104" height="142">
<hr>

Frequently Used Elements

<p>HTML tables start with a table tag.</p>
<p>Table rows start with a tr tag.</p>
<p>Table data start with a td tag.</p>

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>