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)
< is the same as <
> is the same as >
© 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:
|
1 |
<iframe width="640" height="360" src="http://lesliefranke.com/files/reference/htmlcheatsheet.html"></iframe> |
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:
- The Grid
- Color Palette
- Navigation
- Design Principles
- Typography
Want to know more?
The Grid
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)
