Ok, onto the next course.
Starting with some history
HTML – Structural, CSS – Presentational, Javascript – Behavorial
A Markup Language is not the same as a programming language. Programming languages say how something should behave, while Markup languages add annotations and structure to a text document.
Sounds simple, but HTML is really there to tell the browser which part of the text is which – which is the headings, the images, the tables, the paragraphs etc – to give the text structure.
HTML was originally created for scientific papers, and was not intended to be as interactive as they are today.
The Internet – the physical infrastructure that’s spread around the globe for exchanging data
The World Wide Web (www obviously) is an example of a protocol that uses this. Other examples include VoIP, gaming and apps.
Hypertext is the concept of documents being able to be linked together
Global structure:
Set the doctype to html5 with this <!DOCTYPE html>
Save your first page as index.html. It’s very common, and when you put something with that name in a folder on a web server, the server will commonly direct to it by default.
For <html> tags, it wraps the whole document, and has an attribute lang, which should be set to “en” for english. <html lang=”en”></html>
<head> tag is header of the document, and used to include meta information, like links to stylesheets and javascript. Good example is <meta charset=”utf-8″>. May not be necessary all of the time, but is good to include.
<title> tag is for the title of the page. You can see it in the tab. Located nested inside the <head> tag.
<body> tag is for the content of the page, where all text, images, etc goes
<div> tag (for division) is for making divisions and sections of your page. Helps with the styling, and grouping things. It’s a block level element, so it takes up space and will break to the next line, pushing other elements out of the way.
Make sure to indent nested elements, it will make the whole thing a lot easier to read and see the structure.
<span> – very similar to a <div> tag, the difference being that it’s used to divide up text, rather than large sections of a website. This is an inline element, so it doesn’t take up space.
Text elements
There are six levels of header elements, <h1> through <h6>. I like the newspaper analogy they give here. h1 might be the name of the newspaper, h2 might be a section (like SPORTS!), h3 might be the name of an article, and so on. You can have as many of these as you want.
<em> is the emphasis tag. It’s an inline element, usually wrapped around some <p> text. By browser default it italicizes text, but that’s not its real purpose. It should be used when you want to emphasize a point in your text, but it’s subjective on when you want to use it.
<strong> is also an inline element. It will bold the text by browser default, but it should really be used when a thought or word in your text needs to be intensified, or made strong. em is for emphasis, strong is for stronger emphasis
<hr> is the horizontal rule tag, and is an empty aka void element, so it only has one tag. It makes a horizontal line on the page, which is called a horizontal rule. You can make real borders with CSS, so you want to use this when you want to break up text, both visually and semantically.
<blockquote> is used for quoting a section from another source. The cite attribute of the <blockquote> element is is used for citations, like for saying who the quote is from. Its value must be entered as a url:
<blockquote cite=”http://example.com/story.html”>
<p>
This is a quote I made.
</p>
</blockquote>
<q> element is for quotes. It’s related to the blockquote element, and is used for inline content that doesn’t require paragraph breaks, like the block level blockquote element does. You can use the cite attribute here as well
<p>One time I said <q cite=”http://example.com/page.html”>It’ll be okay, I mean it won’t.</q></p>
<code> is a semantic element that represents a piece of computer code and is an inline element. Puts the selected text in a special, monospace font.
<p> The <code>drive()</code> function on the <code>vehicle</code> object</p>
<pre> element represents a block of preformatted text. It will retain the formatting it had when written in the code. This is the point of it. If you did the below example with a <p> element it would all appear on one line. By default it is slightly indented from the left side of the browser. <pre> and <code> can be used together to maintain code formatting.
<br> element represents a line break, and is a self closing, or empty, or void tag. Shouldn’t be used for making spaces and sections for your page, should be used for actual line breaks in text, like different lines of a poem.
<abbr> element is for abbreviations, like for an acronym. Is for semantics, and is an inline element. The title attribute is for the expansion of the acronym. This is just like the title tag for images where in that if you hover over its element, in this case the <abbr>, you can see what it says.
<p>I know how to use <abbr title=”Self-Contained Underwater Breathing Apparatus”>SCUBA</abbr> gear</p>
<address> element is for contact information. Typically use this with line breaks. If the address element is a direct child element of the body tag, then it’s the contact information for the whole document. If it’s inside another element, like one meant to represent a person or place, it would be for each individual one (like if you had a list of people and their addresses).
<cite> element represents the title of a work, like a book, movie, etc, and is an inline element.
<p>My favorite book is <cite>Fight Club</cite> by Chuck Palahniuk.</p>
<wbr> element represents a line break opportunity. It won’t always insert a line break like the <br> element does. If there’s not enough space on the page to fit the whole word in, then it will break the text on to the next page at the place that you specified.
<p>mybigwebsite<wbr>withalotofwords.com</p>
Lists
<ol> is an ordered list. <li> is for the list items in the list. Will number the list items in the order you wrote them, and do some indentation.
<ul> is for an unordered list, basically the same thing only it doesn’t put numbers with the list items, but bullet points instead (by default). However, unordered lists can be nested, and it will change the bullet point of the nested lists and indent them further. You need to make sure you put the nested list in the <li> element of the part you’re nesting into.
<dl> is the definition list element is used for groups of terms that need descriptions or definitions. This has two types of tags inside it, instead of just one. <dt> is the definition title element, for the main part of your list. <dd> element is for the definition description.
The <dt> tag is nested inside the <dl> one, while the <dd> one is just listed underneath the <dt> ones, and not actually nested in it. You only should indent if an element is nested inside another one.
You can also list two <dt> elements in a row, and then provide a definition for both of them underneath with a <dd> element.
Anchors
<a> is the anchor element, for linking pages together. The href (hyperlink reference) attribute let’s you choose what it links to, not just other pages but different parts of the same page. You do this by setting an id on the thing you want to link to, the setting the href=”#idname”. This will take you to the top of the referenced element. The “anchor” is what’s between the a tags, and the direction is the value entered for the href attribute.
It’s good practice to always provide a link to previous pages, so the user doesn’t have to use the backspace button.
To link to a different page in the same site, you’ll want to make sure that html file is in the same folder as the on you’re putting the anchor in, so you only have to write the file name: <a href=”contact.html>Contact Us</a>. Remember, this is called relative link, which uses a relative file path. This is different than using an absolute link, which would include the complete file path or link: http://www.example.com/contact.html. Relative links are better to use, as they make it easier if you need to change things (like if your domain changes).
When navigating file folders, typing “..” let’s you go up a folder from where the file is now.
broken link – when the browser can’t find the value for the href attribute for a link
URL – Uniform Resource Locator
URI – Uniform Resource Identifier. The difference between the two is that a URL is actually a specific type of a URI.
Images
img – image element, src attribute is for the location of the image, alt is for a text description of the image in case it doesn’t load or someone’s using a site reader due to vis, and also for search engines. title let’s you add a message that appears when they hover.
object element was introduced in HTML 4 by W3C with the intent of unifying embedding multimedia on the web. However, this didn’t work too well due to a mixture of plug ins and browser inconsistencies. The standard was open for interpretation. It’s okay though, because this typically entails copy and pasting embed code from another website, like youtube. width and height attributes let you set the width and height of the video in pixels.
param tags set various properties into the object element, with the name attribute, which tells you what the value is for, like “allowfullscreen” and the value attribute, which sets the value for that name attribute (like “true”).
The object and param tags are mostly for internet explorer compatibility.
embed tag kind of duplicates the object and param functionality for other browsers. embed is not actually a W3C standard, but it has better cross browser support, with the exception of IE. It’s a bit of a hack. It has a bunch of attributes that mimic the params: width, height, allowscriptaccess, allowfullscreen, src (for the link to the media). You need to have both to support everything though, but embed is better since it’s not owned by a specific company, like object is with Flash.
Example of what this looks like further down the page.
link tag goes inside head element. NOT the same as an anchor tag, won’t create a visible link for the user. Instead, it links to other resources so the page can use them. Attributes: rel is for the type of the link, type specifies the MIME type of the linked document/resource, and href lets you put the source of the link.
<link rel=”stylesheet” type=”text/css” href=”my_style.css”>
script tag is for adding javascript to the page. Similar to link in that it has a text and src attribute. Unlike link, this isn’t an empty tag so you need to add a closing one. The reason for this is that you can include scripting in this element rather than linking to one, but like internal CSS, this is frowned upon.
<script type=”text/javascript” src=”javascript/app.js”></script>
iframe element allows you to smash to web pages together, letting you load one page, into another page inside of a box. Goes in the body section. Attributes: height, width, src. Not an empty element, need to have a closing tag or stuff after it won’t load.
This is how you add html comments: <!- – Comment goes here. – ->
If you right click and choose “View page source” it will open a new tab with the HTML. Notice the URL, all it did was add “view-source:” to the front of it. For example: view-source:http://teamtreehouse.com/library/html/objects/includes-and-iframes.
Shortcut – View page source: Cmd + option +U
Tables
table element, ideally should only be used for tabular information and NOT page layout, which is what CSS is for. You put tr (table row) elements inside of the table element to make rows. Then, inside there, are two types of elements we can use. td for table data, or th for table headers. th has the default styling of being centered and bolded. To add new columns, just add more th and td elements to your table rows. border attribute can be used for the table element, but I believe it’s better to do it with css instead.
Now, how would you add a new row to just the second column and not the first? Just insert an empty td element ahead of it:
thead element is the table head element. You nest the tr with the th elements inside of it inside the thead one. Usually this is just for semantics, but when you have a large complex table, it makes it easier to search for search engines, easier for screen readers, and finally, will make it easier to select the table header for css styling.
tfoot is the table footer element. It goes beneath the thead element in the html, but will appear at the bottom of the table on the page. By default it will only appear in the first column, but you can use the colspan (column span) attribute to set how many columns the cell spans across.
align attribute can be used to set whether things are centered, to the left or to the right in their cell. valign attribute is for vertical alignment, and can be set to top, bottom, or middle. cellpadding attribute sets the padding for cells. cellspacing attribute can increase the space between table cells.
Forms
form element allows you to get input from the user. action attribute is required, it’s what will load once the form is submitted by the user. You can put a # in if you don’t have one for now. method attribute can be POST or GET (think API’s). name attribute just needs to be descriptive, describing what the form actually does. Will show up in server side programming, so you know which form got sent.
To actually have this submit to a site, you need to know about server side programming, like php, ruby, python, etc.
input element is what you actually use for a majority of the form elements. It’s very versitale, and the type attribute can be used to modify what it does.You then use the name attribute to say what this field would be for. Different type values include:
text – for text, duh. You can use the value attribute to put something in the text box for them.
password – will hide what the person is typing with little dot symbols.
radio – lets you click to choose one option from a group. Has the value attribute as well, that you can set to what that selection means. Should add text after to show what it means. By leaving the name attribute with the same value, the browser will know to group them together.
checkbox – similar to radio buttons but allows you to select multiple items at once. same value and name attributes.
submit – for submitting the form data. The value you set will be what it says on the button. When you click this button, it will take you to the page specified in the action attribute of the form element, and if your form had a password type input, your browser will ask you if you want to save that password.
Form styling depends on your OS and sometimes your browser. It’s fairly difficult to style form fields with CSS.
textarea element gives people more area to write things. The name attribute works just like for the input element where you’re saying what this field is for, the row attribute lets you set how many rows you give them and the cols attribute is for columns (cols and rows are really just an alternate way of thinking about width and height).
select element contains option elements. Good for when you have a few too many things for radio buttons, makes a dropdown box for you. optgroup element allows you to group options together, contains label attribute for describing what the group is for. This makes it so when you click on the dropdown the option elements nested inside it will appear in a group slightly indented, with the label attribute’s value in grey above.
<fieldset> element lets you break your form inputs into groups (which look like boxes). The <legend> element is nested inside that, and will be what the name is for that box. You can use the align attribute to center it.
<label> element is used to label each of the inputs. It has the for attribute, which lets you know which input it is labeling. In your input elements, you need to add the id attribute for this (which is different than the name one). Besides linking them, it will also make it so if you click on the label, it will put your cursor in the form field automatically. For check boxes and radio buttons, you’ll want to wrap the label around the word you put in after the input element.
Your name attribute doesn’t need to be the same as your for and id attributes (which do), but it’s a good idea to do so for sake of clarity.
All done! On to the next one, on to the next one.
Kyle's Awesome Awful Websites 