Code Academy Lesson Guide

Index

• Learning The Language
• The Basics
• Styling
• Visuals
• Links
• Tables
• Forming Input
• Review 1
• Review 2
• Review 3

Quick Tools

Declarations or !DOCTYPE html is how you will declare any HTML file. This is done at the beggining.
The HTML Tag or html is placed after the declaration. This is where all your HTML code will go.
Divisions or div are used to group text together.
Attributes or id can be added to division for further defining groups.(Gives a brief description that will only be shown in code.)
Line Breaks or br are used to place text on a new line.
Comments or !--Content-- will be messages that will not be displayed.

Lesson 1 ~ Learning The Language

HTML uses opening and closing tag syntax to group together code. You must understand that HTML uses a parent style relationship. Where you must follow steps/prerequisite to further write code. You will start with initializing that the program is an HTML file. You will then define a header. A header is almost like a title/substitle when writting a paper. Then will proceed to the body.

Lesson 2 ~ The Basics

Before anything you must declare that the following document will be an HTML file. You can do this by entering DOCTYPE html.
Header size can be changed from levels 1-6, with 1 being the largest and 6 being the smallest.
The body is where all content will be written.

Lesson 3 ~ Styling

Italic text is written using em tags.
Bold text is written using strong tags.
Bullet Points can be added by declaring using ul and then listing them using li tags.

• A
• B
• C

Numbered Points can be added by declaring using ol and then listing the, using li tags.

1. A
2. B
3. C

Lesson 4 ~ Visuals

Images

Images or img allows you to add a picture found on the web. Most elements have required both opening and closing tags but the image tag has it's own.
Source or src are needed to site the source of the image.
Alternative Text or alt can be used to give a description of the image only in the code. This is helpful if the image does not load, Screen reading software, and helps the Search Engine Omptimization(SEO).

Videos

Videos or video allows you to add a video found on the web. A video does require both opening and closig tags. Source or src are needed to site the source of the video.

Review 1

• HTML stands for HyperText Markup Language and is used to create the structure and content of a webpage.
• Most HTML elements contain opening and closing tags with raw text or other HTML tags between them.
• HTML elements can be nested inside other elements. The enclosed element is the child of the enclosing parent element.
• Any visible content should be placed within the opening and closing body tags.
• Headings and sub-headings, h1 to h6 tags, are used to provide titles for sections of content.
• p, span and div tags specify text or blocks.
• The em and strong tags are used to emphasize text.
• Line breaks are created with the br tag.
• Ordered lists ol are numbered and unordered lists ul are bulleted.
• Images img and videos video can be added by linking to an existing source.

Lesson 5 ~ Links

Web Links are very similar to Images and Videos. Links also need a declaration and a citiation.
Declaration for Web Link or a can be used to declare that the following will be a WebLink.
Citation for Web Link or href,otherwise known as hypertext reference, can be used to cite the Weblink.
WebLink
A Web Link can be open in the same browser or can be set to open a new browser. To do this you must set the element target.
The target attribute acompanied by _blank is how you would do this.
Opening Links on a New Window
Up until this point we have only done Web Pages, now we will do other programs.
Relative Page is set up using an a href tag, the only difference between a WebLink and a Relative Page is you must include ./ before typing the name of the file.
Example
At this point you can link anything, now we will place a link inside of an image.
Once user clicks on image, user will be taken to the desired link.

Making links to travel the page easier will be helpful in navigaton. Shown above at the begginging of the page, you can see how this was done. You're basically putting an a href tag inside of either bullet points or numbered points or ol/ul.

Review 2

• The !DOCTYPE html declaration should always be the first line of code in your HTML files. This lets the browser know what version of HTML to expect.
• The html element will contain all of your HTML code.
• Information about the web page, like the title, belongs within the head of the page.
• You can add a title to your web page by using the title element, inside of the head.
• A webpages title appears in a browsers tab.
• Anchor tags (a) are used to link to internal pages, external pages or content on the same page.
• You can create sections on a webpage and jump to them using a tags and adding ids to the elements you wish to jump to.
• Whitespace between HTML elements helps make code easier to read while not changing how elements appear in the browser.
• Indentation also helps make code easier to read. It makes parent-child relationships visible.
• Comments are written in HTML using the following syntax: !-- comment --.

Lesson 6 ~ Tables

To create a table you would first declare a table. Then you would add rows(tr) and values(td) to fill in the table. Table Headings identify what the information is. TO create a table heading you would use (th).

	Saturday	Sunday
Temperature	73	81

Lesson 7 ~ Forming Input

It will be easier to compare this section in terms of JAVA code. Forming Input or having the user be able to insert input requires chronilogical steps like most HTML code.
You will need a form element to basically declare that input will be recieved. In terms of JAVA code this is like declaring (import java.util.Scanner).
Along with a declaration you will also need a location and an assignment(nickname).
The action attribute determines where the information is sent. The method attribute is assigned a HTTP verb that is included in the HTTP request.
You can also name the input to make it easier to identify.
On top of that you can have an assigned value to that text box.(Useless)
Adding a label can be done using the label tag. In your label you will have to declare what the label is for(this will be the id of the input).

Enter the Username

Passwords are very similar to the username. Only difference is the type. For type password the input will be displayed using hidden asterisk or dots.

Username:
Password:

Type number will add a up and down button on the corner or you can type the number.

Number: