Skills

Lessons in HTML5

Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6

Lesson 1 - Tags, Paragraphs and Linebreaks.

Tags --- There are 2 kinds of tags, double tags have opening and closing tags and single tags are just that. Tags are used to add any piece of code including text and graphics. A tag starts with the less than bracket, followed with any series of letters and slashes and closed with a ">" symbol.

Paragraphs --- We all know what a paragraph is. For simplicity's sake, it's one group of text seperated by a space from another group of text. In HTML, this is done using a double tag; an opening tag of "p" and a closing tag of "/p".

Linebreaks --- A linebreak is when you want to skip to the next line without putting a space in between your two body's of text. This is your "enter" key. This is done using a single tag of "br /".

Lesson 2 - Horizontal Rule, Bold + Italic text, and Comments

Horizontal Rule --- A Horizontal Rule is a line seperating different sections in your website. And example of this is the line found after the first Header titled "Lessons learned in HTML" and those found in between each lesson. Horizontal Rules are programmed with a single tag of "hr /".

Bold + Italics --- In HTML, to make text Bold or Italics, each require double tags. For Bold, the opening tag required is "strong" and the closing tag is "/strong". For Italics, the opening tag required is "em" and the closing tag is "/em".

Comments --- A comment is something I can post to myself for the future but doesn't show up in the browser. This is done with a special comment tag. The tag start with "!--" and ends with "--". Everything in between is in the comment.

Lesson 3 - Creating a Link

Links ---In creating a link, you need a double tag. That opening tag is "a" and "/a" to close it. In addition to a tag, you also need an attribute to make a link work. The attribute is added after the "a" (for anchor) in the tag. This is done by adding a space after the "a", followed by "href=(the FULL HTML of the website you want to link in quotation marks)". To link to Google, the tag would be "a href="https://www.google.com/"". Click the word "Link" in the Lesson 3 Header.

Links to different spaces on the page --- This is best used to create something of a glossary. Examples of this are in the links to the different lessons at the top of the page under the Header, "Lessons learned in HTML". To create this type of link, you must program which text will be the link, and where on the page that link will take you. The tags for programming the link are an opening tag of "a href="#(whatever shortcut you wish to use)"" and a closing tag of "/a". The tags for programming where on the page you want the link to take you are an opening tag of "a name="(the same shortcut used in the last parenthesis)"" and closing tag of "/a".

Links to an E-mail address --- Links to an E-mail address are create with the opening and closing tags of "a href="mailto:(whatever email you wish to link to)" and "/a".

Tool Tips --- A Tool Tip allows you to create a pop-up box when you hover the curser over the link. This pop up box is generally used as a description to what the link is. A Tool Tip is created with a double tag of "a" and "/a". It also has 2 attributes in the first tag. The first is the "href" attribute we've already used and the second is a "title" attribute. The "title" attribute is created with "title="(Whatever you want your Tool Tip to read)""An example of a tool tip is this link to Google.

Lesson 4 - Adding Images

Images ---Adding images is very easy. It's done with a single tag of "img /". To pragram which image the tag will showcase, you must give it the attribute of "src="(the name of the file you want to use)"".

Adding Links to Images --- Adding a link to an image is done with a double tag, exactly as we use to add a link to text. The image above is linked to the video I watched with taught me how to code at the level used to make this site.

Resizing Images --- Resizing images is done by adding another attribute. The attrubute we're going to use is height and this is done with "height="(x)"/".

Lesson 5 -Tables

Creating a Table ---In order to have a table, you need both rows and columns. This will take a few sets of tags. First you start with your table tags of "table" and "/table". The your row and column tags go in between. First we'll make two rows. This is done with "tr" and "/tr". Everything in between those tags will be in the first row. Copy and paste these two tags and now you have two rows. Now to make columns, use the tags "td" and "/td". Apparently It means table data. These tags go in between the row tags. Check this 2x3 table below.

Adding a Border to your Table ---Adding a border to your table is easy. There's an attribute you add to the opening tag. "border="(X)"". Check this 3x3 table below.

Creating Table Headers ---Creating a table header is also pretty easy. The first row we use with be row of headers, so we're going to use a slightly different set of tags. Instead of the "td" an "/td" tags, we're using "th" and "/th" tags. The result is the following:

Colspan ---A Colspan is used when you want a varying number of columns in a row. This causes one column on any row span more than one column length. This is done by adding the attribute "colspan="(x)"". The number '2' was used in the examble below, allowing the the Header of 'Name + Age' to span both rows below it.

Table Width ---You can adjust the table in two ways with the attribute "width="(X)"". In place of the X, you can insert a number or a percentage. If you use a percentage (for example, %100), it will take up that percentage of the width of the screen. If you use a number, the table will adjust the width to that many pixels.

Cell Padding ---Cell padding puts a space in between the text and the edge of the cell. This can give your table a cleaner, less crammed feel. This is done with a single-tag attribute of "cellpadding="(x)"". The number inserted will be the added pixel space between the text and cell edge. Example shown below has "6" pixels of padding.

Cell Spacing ---Cell spacing puts a space in between the edge of the cell and the edge of the table, essentially creating a larger border of the table. This is done with a single-tag attribute of "cellspacing="(X)"". Example shown below has "6" pixels of spacing.

Lesson 6 - Creating Lists

List Items ---In between the tags for your list, you will need list items, which have their own sets of tags.

Tag: li + /li

Unordered Lists ---Unordered lists are bulleted lists. Example shown below.

Tag: ul + /ul

• Work it harder
• Make it better
• Do it faster
• Makes us stronger
• More than ever
• Hour after
• Our work is
• Never over

Ordered Lists ---Ordered lists are numbered lists. Example shown below.

Tag: ol + /ol

1. Is the loneliest number
2. Can be as bad a 1
3. Blind Mice
4. Score
5. Finger Death Punch
6. Afraid of 7
7. Ate 9
8. Next in line