Plain Text, not Rich Text
HTML is edited in a text editor. This is similar to a word processor, but instead of formatted text, text editors use plain text. Plain text is simpler in that it doesn't contain formats to text like bold, italics, or lists.
Static Web Languages
- HTML - Content and Structure
- CSS - Look and Formatting
- Javascript - Interactivity
- Too complicated for this class
- Java and Javascript are not the same
Hyper Text Markup Language
Tags mark up and describe the content. Some have opening tags that pair with closing tags. Others are self-closing.
HTML 5
The fifth version of HTML adds simplified syntax, video objects, and new semantic elements like article and nav.
HTML 5 is the future, but the simplified syntax is backwards-compatible with more than 99% of browsers in use today. This is a win-win for learning and development—there is no reason not to use the simplified syntax.
Self Taught
Generally, if you're stuck on something, someone had the same issue and someone else knew how to fix it.
Before you ask how to view source in Firefox, you could Google: View Source in Firefox. Other strategies include looking for software alternatives by adding vs or review: Firefox vs or Firefox review.
Don't know what to ask? Not finding anything reputable? Raise your hand.
View Source
The best part about learning the static web languages is the ability to see what code is being used to make any page. Generally, this can be done by right clicking on the page and selecting "View Source", but it may differ depending on your browser.
Basic Tags
<title>
The title tag is metadata that is displayed at the top of the window. It's used for bookmarks and search.
<head> and <body>
These tags hold metadata and content respectively.
<h1> through <h6>
These heading tags divide content semantically.
<p>
A paragraph of text
Practice: First Page
Copy:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert Title Here</title>
</head>
<body>
<h1>The Most Important Heading, usually the Page Title</h1>
<h2>Second Most Important Heading, usually a section</h2>
<p>A paragraph of text, expertly crafted by a wordsmith is only complete with the right locution. In other words, write well, and people may read it.</p>
</body>
</html>
Paste it into a plain text editor and save it as index.html somewhere you can find it.
Don't Forget to Validate!
Second Page: Links
Lists: ul, ol
Images
<img src="http://phil.wiswanson.com/classes/firstweb/img/HTML5_Logo_128.png" alt="text for accessibility or when images cannot be displayed" />
"When it comes to image formats on the internet, it's generally a three-way tie between JPEG, GIF, and PNG. Deciding which image format to use is relatively straightforward; you choose lossy JPEG when you're saving continuous-tone photographic images, and you choose between lossless GIF or lossless PNG when you're saving images with large blocks of the same or similar colors. See my comparison of GIF/PNG and JPEG if you're not clear on what the difference is. But the choice between GIF and PNG is no contest. PNG is a more modern and vastly improved version of GIF that (almost) completely obsoletes it."
— Jeff Atwood on Web Image Types
Editing Images
Most images on the web are rasterized images that are measured in pixels. Each dot on your screen is a pixel. The projector has 1024 pixels when measured horizontally and 768 when measured vertically. Shorthand, that would be 1024 by 768. When editing your images, it doesn't make sense to put up a larger image than you need, so decide how big you want your images to be and compress them to a reasonable resolution and file size (for fast site loading).
Recommended Software
Tabular Data
I'm not a fan of tables. It's really messy markup and only useful for tabular data (like spreadsheets). If you have less than three columns, I recommend a definition list, but if you really need to, this table tutorial should have you covered. Note: Don't worry if the definition list doesn't look how you want to organize your data. We'll learn to style elements with CSS.
Entities
Certain characters aren't supported by UTF-8 encoded plain text. To fix these, we must use a character known as an entity. Some examples are "typographic quotes", →arrows←, & ampersands (" ← and & respectively). You can find more entities on this list.
Comments
In programming, it's common to explain code or leave notes that don't show up in the program. In HTML, this is activated with this syntax:
<!-- To team: Write well, Revise often -->
It's important to note that these are still viewable to the public if they know how to view source. Sites may use these to hide bonus content: Daily Mail used comments to hire a Search Engine Optimization expert.
Progressive Enhancement
"Put simply, progressive enhancement is the technique of building websites with strong foundations so that it’s accessible to the wide range of browsing situations — from mobile devices and netbooks, to desktops and screen-readers."
— Lars Kappert, Six Revisions
Validation Revisited
Basic Styles
Further Practice
While you should keep in mind that some of their stuff is out of date with the advent of HTML 5 and newer image technologies, HTML Dog is still fantastic.