Technology Instructor

K-12 Education Series

headfirst_series

Our K-12 head first series for high school students continues with a in-depth look at understanding markup in HTML5. The Hypertext Mark-up Language known as HTML is now in it's fifth iteration with several brand new features for web designers, developers and young students of technology. Lets begin with the core basics by describing HTML as the foundation of a house with CSS ( Casting Style Sheets) as the decoration or interior design. We will cover  Bootstrap CSS in relation to JavaScript during a later tutorial. In able to follow along you will need a simple text editor such as TextEdit on your Mac or PC. If you need assistance on either Windows or Linux, please let me know in the comments below. 

Creating a new  html5 document in TextEdit ( Mac OS X )

By default, TextEdit creates "rich text" documents, that is, documents that have hidden style information instructions for making text bold, setting font size, and so forth. You can tell that TextEdit is in rich  text mode when it has a formatting toolbar at the top of the window (as seen in the screenshot below) while plain text formatting does not. HTML5 documents need to be  written in plain documents, and we will need to change the format, as shown in the examples. 

  1. Use the Finder to look in the Applications folder for TextEdit, When you've found it, double-click the name or icon to launch the application. 
  2. TextEdit opens a new document. The text-formatting menu at the top indicates that you are in Rich Text mode. I will show you how to change it, in able for us to input HTML5 tags. 
  3. Open the Preferences dialog box from from the TextEdit menubar.  
  4. There are three settings you will need to adjust in able to use the application as a text input for HTML5. On the "New Document" tab, select "Plain text". 
  5. On the "Open and Save" tab, select "ignore rich text commands in HTML files and turn off "Append '.txt' extensions to plain text files. 
  6. When you are done, click the red button in the top-left corner. 
  7. When you create a new document, the formatting menu will no longer be there and you can save you text as an HTML document (index.html). You can always convert a document back to rich text by selecting Format--Make Rich Text when you are not using TextEdit for HTML5

text_edit1 


text_edit2


text_edit3


text_edit4

This document in TextEdit is ready for HTML formatting. 

Step 1: Begin writing HTML with your own content

While HTML5 contains an array of tags, I will provide some of the most basic ones while you learn how to write your own documents on the web. A web page always begins with content, thus we will start our demonstration with content that is important and relevant to us. Exercise Quiz 1-1 walks you through entering the raw text content and saving the document in a new folder using the .html extension. 

Naming Conventions

It is important that you follow these rules and conventions when naming your html files:

  • Use proper suffixes for your files
  • Never use character spaces within filenames
  • Avoid special characters
  • Filenames may be case-sensitive
  • Keep filenames short i.e.: homePage.html
  • Self-impose conversions

Basic HTML5 Tags to study 

html5_tags1

 

 

html5_tags2

Introducing HTML5 Tag Elements 1-1

<code>

<h1>This is a  big heading one</h1>

<h2>This is a heeding two-</h2>

//Headings in HTML5 go up to <h6>

<p>This is a basic paragraph tag</p>

<blockquote>This is a block of text</blockquote>

<strong>This is how to enter text in bold</strong>

<h3>A picture element tag</h3>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

</code>

Elements with an opening tag <p></p> for paragraph comprises of the basic syntax of all your HTML5 documents and begin with an opening and closing tag. Before we start adding tags to your documents, lets look at the anatomy of an HTML element (it's syntax) and firm up some important terminology. A generic container elements as show here:

html_anatomy1

Elements are identified by tags in the text source. A tag consist of the element name (usually an abbreviation of a longer descriptive name) within angle brackets ( <> ), The browser knows that any text within brackets is hidden and does not display in the browser window when rendered. The element name appears in the opening tag, also called a start tag ( <p> ) and again in the closing or end tag preceded by a slash ( </p> ) The closing tag works something like an "off" switch for the element. Be careful not to use the similar backlash character in end tags. The tags added around content are referred to as as markup. It is important to note that an element consist of both the content and its markup which is the start and end tags. Not all elements have content, however some are empty by definition such as the <img> element used to add an image to a page, as we have illustrated in the examples. In HTML5, the capitalization of element names is not important, this <img>, <Img> and <IMG> are all the same as the browser is concerned. However, in HTML5 the stricter version of html all elements must be in lowercase in oder to be valid as we will see in later tutorials behind the importance of writing semantic code. Many web developers have come to like the orderliness of the stricter XHTML markup rules which HTML5 borrows. 

Basic HTML5 document

The example below shows the recommended minimal boiler plate skeleton structure of an HTML5 document.  I say it is "recommended" because they only element tag that is required in html is the title. But I feel is better, particularly for beginners to explicitly organize documents with the proper structural markup. And if you are writing in the stricter XHTML, all the following elements except meta must be included in order to be valid and semantic. You will see the importance of writing semantic code when we cover Bootstrap CSS in a later project. 

The minimal structure of an HTML document 

<code>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Title Goes Here</title>
</head>

<body>

<p>Page content goes here</p>

</body>

</html>
//Once done save the document in TextEdit as
myFirstPage.html
</code>


  1. The first line in the example is not an element at all. It is a document type declaration also called DOCTYPE declaration that identifies this document as an HTML5 document. 
  2. The entire document contained within an html element. The html element is called root element because it contains all the elements in the document, and it may not contain any other element. It is used for both HTML and XHTML documents 
  3. Within the html element, the document is divided into a head and a body. The head element contains descriptive information about the document itself, such as its title, the style sheet is uses, scripts and other type of meta information. Which we will cover in our Bootstrap CSS project. 
  4. The meta elements within the head element provide information about the document itself. A meta element can be used to provide all sorts of information, but in this case, it specifies the character encoding used in the document The character encoding is the standardized collection of letters, numbers and symbols used in your document. 
  5. Also in the head is the mandatory title element. According to the HTML specs, every document must contain a descriptive title. 
  6. Finally, the body element contains all the tags  we want to show in the browser window. 

Exercise Markup Quiz 1-2

  1. Open a new document inside TextEdit and save it as index.html if is not open already. 
  2. Begin by adding the HTML DOCTYPE declaration: <!DOCTYPE html>
  3. Place the entire document in an html root element by adding an <html> start tag at the very beginning and at the end as well </html> 
  4. Next, create the document head that contains the title for the page. Insert <head> and </head> tags before the content. Within the head element, add information about the character encoding <meta charset="utf"> and the title. "Black Goose Bistro" surrounded by opening and closing <title></title> tags. 
  5. Finally, define the body of the document by wrapping the content in <body></body>
  6. Feel free to  review the HTML tags sheet to add your own content as you see fit. Remember this is an exercise quiz and exploration is mandatory in able to learn. 

Tutorial Examples: 


Exercise Markup Quiz Q/A

<code>

<!DOCTYPE html>

<html>

<head>

<meta charset ="utf-8">

<title>Black Goose Bistro</title>

</head>

<body>

<h1>Black Goose Bistro</h1>

<h2>Welcome to the Restaurant</h2>

<blockquote>Where high end bistro meets casual dining</blockquote>

<p>The Black Goose Bistro offers casual lunch and dinner fares in a hip atmosphere. 

The menu changes regular to highlight the freshest ingredients. </p>

<h3>Catering services</h3>

<p>You have fun.. we'll do the cooking. Black Goose catering can handle events

from snacks for bridge club to elegant corporate fundraisers</p>

<h4>Location and Hours</h4>

<strong>East Jersey Island</strong>

<ul>

<h5>Hours</h5>

<li>Monday Through Thursday</li>

<li>11a to 9p</li>

<li>Friday and Saturday</li>

<li>11a to 2am</li>

</body>

</html>

</code>
  • Save the document  to your desktop as index.html inside TextEdit. Right click the save document and open with Safari web browser to see the document load on your web page. 
  • In the next project tutorial I will cover CSS as an important component to creating professional web pages for K-12 students and young designers wishing to make the jump into web design and development
  • The document will appear in your browser as a rendered web page. Congrats, you have completed your every own web document, well.. at least the structure that is. We will cover semantic code, CSS and validation in out Bootstrap CSS project due shortly. From All Things Web Design-DSC79 

index_exmarkup