GD 65 Class 02A

Topics

HTML Basic Tags
  • HTML Study Guides
  • HTML Examples
  • Test Yourself
  • Basic HTML Tags
  • HTML Cheat Sheet
  • What is HTML5?
The Basics of Web Design
  • The Grid
  • Color Palette
  • Navigation
  • Design Principles
  • Typography

HTML Basic Tags

We’ll continue to study HTML tags throughout this course. Below is the list of the most common HTML tags, so please start studying these tags. I’ve posted a few HTML study guides for your reference. And feel free to post any questions you have about any of the tags to the comments section of this page.

HTML Basic Document

<!DOCTYPE html>
<html>
<head>
<title>Title of document goes here</title>
</head>

<body>
Visible text goes here…
</body>

</html>

Basic Tags

<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>

<p>This is a paragraph.</p>
<br> (line break)
<hr> (horizontal rule)
<!– This is a comment –>

Formatting

<b>Bold text</b>
<code>Computer code</code>
<em>Emphasized text</em>
<i>Italic text</i>
<kbd>Keyboard input</kbd>
<pre>Preformatted text</pre>
<small>Smaller text</small>
<strong>Important text</strong>

<abbr> (abbreviation)
<address> (contact information)
<bdo> (text direction)
<blockquote> (a section quoted from another source)
<cite> (title of a work)
<del> (deleted text)
<ins> (inserted text)
<sub> (subscripted text)
<sup> (superscripted text)

Links

Ordinary link: <a href=”http://www.example.com/”>Link-text goes here</a>
Image-link: <a href=”http://www.example.com/”><img src=”URL” alt=”Alternate Text”></a>
Mailto link: <a href=”mailto:webmaster@example.com”>Send e-mail</a>

Bookmark:
<a id=”tips”>Tips Section</a>
<a href=”#tips”>Jump to the Tips Section</a>

Images

<img src=”URL” alt=”Alternate Text” height=”42″ width=”42″>

Styles/Sections

<style type=”text/css”>
h1 {color:red;}
p {color:blue;}
</style>

<div>A block-level section in a document</div>
<span>An inline section in a document</span>

Unordered list

<ul>
<li>Item</li>
<li>Item</li>
</ul>

Ordered list

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

Definition list

<dl>
<dt>Item 1</dt>
<dd>Describe item 1</dd>
<dt>Item 2</dt>
<dd>Describe item 2</dd>
</dl>

Tables

<table border=”1″>
<tr>
<th>table header</th>
<th>table header</th>
</tr>
<tr>
<td>table data</td>
<td>table data</td>
</tr>
</table>

iframe

Forms

<form action=”demo_form.asp” method=”post/get”>

<input type=”text” name=”email” size=”40″ maxlength=”50″>
<input type=”password”>
<input type=”checkbox” checked=”checked”>
<input type=”radio” checked=”checked”>
<input type=”submit” value=”Send”>
<input type=”reset”>
<input type=”hidden”>
<select>
<option>Apples</option>
<option selected=”selected”>Bananas</option>
<option>Cherries</option>
</select>

<textarea name=”comment” rows=”60″ cols=”20″></textarea>

</form>

Entities (Special Characters)

&lt; is the same as <
&gt; is the same as >
&copy is the same as ©

Source : http://www.w3schools.com/html/html_quick.asp


HTML Study Guides

I suggest bookmarking the following HTML study guides so you can refer to these guides when we start building web pages and coding.

HTML Examples

See the above tags in action:

http://www.w3schools.com/html/html_examples.asp

Test Yourself

http://www.w3schools.com/quiztest/quiztest.asp?qtest=HTML

Basic HTML Tags

http://www.everythingaboutweb.com/basic-htmltags/

HTML Cheat Sheet

I used an iframe tag to embed a frame of this page (http://lesliefranke.com/files/reference/htmlcheatsheet.html) into this page, cool huh?

The code looks like this:


What is HTML5?

The tags outlined in the above notes are considered “HTML4” tags. With the introduction of HTML5, the good news is that we still use many of the HTML4 tags, but we have new ones to work with. So take a look at the information below about HTML5.

http://www.w3schools.com/html/html5_intro.asp


The Basics of Web Design

Today’s Web Designer needs to know the basics of coding a page and, of course, the design principles necessary to create visually appealing and successful websites. A successful website is creating a site that is both aesthetically pleasing (typography, color, imagery), and one that is useful and functions for the target audience. Below is an article about the basics of designing for the web.

Please read the following: http://www.everythingaboutweb.com/beginner/the-basics-of-web-design/

The basics of web design can be simplified into 5 subjects:

  1. The Grid
  2. Color Palette
  3. Navigation
  4. Design Principles
  5. Typography

Want to know more?

The Grid

What is grid based design?

Color Palette

Color Theory for Web Designers

Navigation

(See Class 02B notes)

Design Principles

9 Essential Principles for Good Web Design

Typography

(See Class 02B Notes)


Next Page  >  Class 02B Notes

Leave a comment