A109 base code html

If you already know a bit of HTML?

I know there will be a few of you in this course
who have had some HTML background and
this section will seem overly simplified. The
issue here is that the vast majority of students
enrolled in this course have very little to no
experience with coding and programming.

Please bear with us while we work through this
second week.

Translating a Foreign Language

Take a look at the document
to the right. Before I give you
any explanation as to what it
all means, I want you to
examine the various words
and symbols and to see if you
can find any repeating
patterns any logic to it. Can
you guess what it is intended
to do?

Did you notice the following
symbols and words?
<>
</ >
<! - - - - >
DOCTYPE
html
head
title
body
h1
p
Can you find any repeating
patterns? Can you guess the
function of any of the words?

Making the effort here will pay
off with learning later.

The language used here is HTML5. It will
be necessary for you to have, at least, a
basic understanding of HTML5 if you are
going to be working with JavaScript. The
two languages interact quite extensively.

On first review we will divide HTML5
expressions into two types :
1. Tags
2. Text

What you need to know about tags at
the moment is that they are activated by
the appearance of this symbol set < >
and they are deactivated by these </ >
In other words, when the words html or
head or title are situated inside these
symbols they go from being ordinary text
to being tags. And tags make things
happen – like publishing a webpage title:
HTML5 Reference
<title>HTML5 Reference</title>

Find details about the function and use of the
following HTML Tags
<html> </html>
<head> </head>
<title> </title>
<h1> </h1>
<p> </p>

Go to the following website:
http://www.w3schools.com/tags/tag_html.asp
Study the Example and then read the Definition and Usage
section. Place them into your toolbox. In the left hand
column you will find more HTML tags including all the ones
listed above. Place them into your toolbox as well.
Bookmark the website. It is an excellent resource and we
will be using it in a variety of ways.

Put the DOM concept into your Toolbox. This is a
very important concept which we will be discussing
in more detail later.

Document Object Model
Here is one way to visualize a DOM

Here is another
way to visualize
a DOM
Examine this model.
Now go back to the
Translating a Foreign
Language slide.
Compare the two.
Now to the first way
to visualize a DOM.
See what they have
in common. Try to
understand the
organization and why
all three represent
parts of the same
coding entity.

What is the HTML DOM?
The HTML DOM is:
1. A standard object model for HTML
2. A standard programming interface for HTML
3. Language Neutral (and that includes JavaScript)

The HTML DOM defines the objects and properties of all
HTML elements, and the methods to access them.

In other words:
The HTML DOM is a standard for how to get, change,
add, or delete HTML elements.

What is the HTML DOM2?
Something else that HTML DOM is:

1. A way to begin to understand the process of
organizing data so that it can be made useful
2. A way to begin to understand the process of
programming

Add what you have learned about DOM to your
Toolbox. On Sunday I will be asking you to email
me your most up-to-date Toolbox (so better to do
the work sooner rather than later )

There are two shortcuts to
learning to program
1. Start with ordinary language to describe up
you want to do before you translate it into
code
2. Use models to help you visualize what your
program will ultimately do (and look like).

Examine the HTML5 code on the right. Now look at it on the
left. What changed? Was the change useful? Why?

<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>HTML Reference</title> <title>HTML Reference</title>
</head> </head>
<body>
<h1>Definition</h1> <body>
<p>HTML is an acronym <h1>Definition</h1>
meaning HyperText Markup <p>HTML is an acronym
Language</p> meaning HyperText Markup
</body> Language</p>
</html> </body>
</html>

Last week I introduced Text Editors and told you to download
Notepad++, TextWrangler or a similar editor. Open up your
text editor now type in the following HTML5 Code:

<!DOCTYPE html>
<html>
<head>
<title>HTML Reference</title>
</head>
<body>
<h1>Definition</h1>
<p>HTML is an acronym meaning HyperText Markup Language</p>
</body>
</html>

(Don’t worry about formatting, the text editor will do the formatting for you. Just type!)

Now Save Your Work
These directions pertain precisely to Notepad++ but should match
very similar steps in TextWrangler and other editors

1. Go to File
2. Select Save As…
3. Type in a File Name (use your first initial, last name and the no. 1)
4. Click on the drop down arrow on the right side of Save as Type:
5. Select Hyper Text Markup Language (html, etc.)
6. Save in a directory for easy retrieval

This is what it will look like
…at least in Notepad++

Notice the way it organized and visualizes the code
Go back and open and close the +/- boxes

Last Step – The Fun Part
1. Go back to your Text Editor
2. Choose the Run function from your Menu Bar
3. You will have several choices for Launch in a Web Browser
4. Choose the one you use and click on it
5. A window will open in that browser and your program will appear.
6. It is a very simple program. It shows the header Definition and then
gives a brief explanation of that definition.
7. So now go back to your text editor and make some changes. Play
around with it. See what happens when you run the changes.
8. Once you’re satisfied with your work send me a copy of the file.

A109 base code html

More Related Content

What's hot

Viewers also liked

Similar to A109 base code html

A109 base code html