Chapter 1 Chapter 2 Chapter 3 Chapter 4

Start Coding HTML5 ~ Chapter 1


Getting Started | Time to Learn Some New Tags | Practice What You've Learned | Review

Let's Get Started

How to build HTML tags. HTML tags are like a sandwich. You need to sandwich the content in the opening and closing parts of the tags. An opening and a close tag will look identical except for a forward slash (/). The forward slash, placed directly after the open wicket tells the Web browser to stop doing the action of the tag. For example, the closing bold tag tells the browser, to stop making the text bold. The closing </ol> tags tells the browser that you have finished the ordered list.

One of the main display types is Display:block. Remember that Block elements are intended to separate content. One of the principles of HTML5 is to not reinvent the wheel. It turns out that there are some very common conventions in web design and content strategy. So HTML5 offers some new ways to markup these conventions without changing the way things are done. An example would be the website header.

Before the creation of HTML5 we would put our header content in a div element with a class called "header". Now HTML5 gives us the header element to organize the header content.

Having a header element, is more semantic, and makes our content more transportable, so that when your content is served on a device viewport other than a browser, it can know that this content is definitely header content, as opposed to a common div with a special class that it cannot understand. Another reason is that this makes the content much more understandable to search engines. And lastly everyone in the web development community knows unequivocally what a header tag is, versus a convention that I made up that you may not understand.

To create a web page you need two software programs:

What you do not need is an:

Did the fact that you do not need an Internet connection come as a surprise to you? While it would seem like creating a Web page for the Internet and an Internet connection would seem like an obvious connection, Web pages can be displayed locally on your computer via the web browser that is installed on your machine.

You can use any type of Web browser that you have installed on your computer and when it comes to testing your Web pages, the more browsers the better. For a text editor, I use Notepad ++, but you could use:

You should not create your code in Microsoft Word. Write your code only in the text editor. I do use Microsoft Word to type a lot of my document content (the text that will be displayed in the browser) so that I can run spell check however be careful about using special characters and smart quotes (including apostrophe) because they do not render correctly in the Web browser. I then copy the text over to the text editor and place it between the appropriate HTML tags.

HTML5 code is the instruction to the Web browser on how to display your content or how to structure the page itself. The HTML5 instructions are encased in angle brackets (also known as "less than" and "greater than" signs) called wickets. The wickets differentiate HTML5 code from document content for the Web browser.

There is a proper way to write your HTML5 code. While HTML5 itself is not case sensitive (unlike other programming languages), current industry standard dictates that HTML5 code is written in all lowercase. This is also important for your code to validate properly.

All web pages start with a basic structure. Creating a template file to use over and over again will save you time and also help you prevent errors in your code. Watch this video as I demonstrate how to create your template file for this course.

Assignment: Create Your Temp File

Directions: You will create a temp file that you use as the starting point for all other Web pages in this class. Download the instructions here and then submit temp.html to the itsLearning assignment.


Time to Learn Some New Tags

I am going to demonstrate how to create a few web pages. I will explain the tags as I use them. These videos are from the Introduction to Digital Technology course but you might have forgotten the HTML code if you have not been creating web pages since you took that class. A great resource for all things HTML5 is W3Schools. Make sure you check out their website. You can search by tag and see exactly how to code it. Make sure you are searching for HTML5 otherwise you may get an earlier version of HTML and start using outdated code.

Syntax

HTML5 elements generally combine the tag, attribute and a value. The tag will always follow the open wicket. Attribute(s) and value(s) follow the tag and affect how the tag operates. The attribute and value are separated by an equal sign and values are encased in quotation marks. Some tags do not need attributes and other tags are dependent on their attributes. There can also be multiple attributes used within the same tag and sometimes attributes work with multiple tags.

Here are some tags that you should get to know:

Tags Description
h1, h2, h3, h4, h5, h6 h1-h6 control the size of the text. They are used for headings and give the text a bold appearance. h1 is the largest while h6 is the smallest. Default text is closest to an h4.
b Creates bold text
i Creates italicized text
ol Creates an ordered (numbered) list
ul Creates an unordered (bulleted) list
li Used to indicated the individual items in a list
hr Creates a horizontal rule (line) across the page

picture of girl with a laptop

At this point you are ready to start trying out all of these tags and creating your own web sites.

Practice: Create a Friday File

Directions: Follow the directions in the picture below.

instructions for practice

Assignment: Create a Monday file

Directions: Follow the directions in the picture below.

instructions for monday.html


Practice What You Learned

The best way to learning to create web pages and work with the code is to dive right in and start practising it. Make sure you check your pages in the browser often. It is much easier to find and correct errors a little at a time then to wait until you get it all down and then start the debugging process.

Assignment: Chemistry Class

Directions: Download the instructions here:  Chemistry Class to create a Web site for Mr. Davis, a chemistry teacher at East Forsyth High School. Follow the directions on the assignment sheet.

Assignment: Child Advocacy Center

Directions: You are on the board of directors for a small, nonprofit agency in Las Cruces, New Mexico that provides financial and emotional support for families with children who have newly discovered physical or mental disabilities. The agency received significantly more donations in the last year than expected, and it has decided to offer qualifying clients temporary help with housing and medical costs. The board has asked you to post the eligibility requirements and application process on the Web.

The page needs an inline image, three headings, a list of eligibility requirements, and application instructions. Two of the items in the list also have nested lists.

Download the instructions here: Child Advocacy and the image file here: newborn.jpg. Follow the directions on the assignment sheet.

Assignment: Chapter 1 Worksheet

Directions: Complete the Chapter 1 worksheet in itsLearning.

Assignment: Chapter 1 Production Assessment

Directions: Complete the Chapter 1 production assessment. Download the assessment in itsLearning.


Resources

If you are having problems viewing this page, opening videos, or accessing the URLs, the direct links are posted below. All assignments are submitted in itsLearning. If you have having problems, contact Mrs. Rush through the itsLearning email client.

HTML5 Basic Part IV: https://youtu.be/1SLB-vCqR0g

HTML5 Basic Part VI: https://youtu.be/gb8SzwkM6Lo

HTML5 Tutorial for Beginners part 2 of 6: https://youtu.be/YcApt9RgiT0

Creating a Template File video: https://youtu.be/sWz-WcHgff4s

Mrs. Rush HTML1: https://youtu.be/gR_27JcPFjU

Mrs. Rush HTML2: https://youtu.be/5akCNffQy4E

Transcript: http://mrsrush.net/digitaldesign/html/chapter1.pdf


Credits

Girl with laptop: http://vectorcharacters.net/


Transcript of this lesson