COURSE MODULE 2 (Chapter 1-3) (4-5)

  • START MODULE 2

  • Watch Video 1 





 CHAPTER 1

Why learn HTML?


  • HTML is considered the gateway to all other computer languages.

  • HTML coding is fun and easy to learn. It takes about an hour or less to create your first webpage.

  • Coding expands the mind, builds self-confidence and concentration.

  • It teaches organization, offers early lessons in logic and self-control.

  • Even when using what-you-see-is-what-you-get (WYSIWYG) software, knowing the code behind the design lets you tweak it to your desire. Remember, we are all limited by the software we buy and the designer who creates it. If we want to make changes, knowing the code helps!

  • Yes, HTML may seem hard in the beginning, but it’s easy to understand within a short period of time.

  • But more importantly than all these reasons…HTML is Fun!


What is HTML?

HTML stands for Hyper Text Markup Language. It was developed by scientist named Tim Berners-Lee in 1990. HTML is the "hidden" code that helps us communicate with others on the World Wide Web (WWW).
When writing HTML, you add "tags" to the text in order to create the
structure. These tags tell the browser how to display the text or graphics in the document. For example, the following document has a simple layout (structure). 

Notice there are three major parts: a heading, two paragraphs and a bulleted list.





Text editors

To achieve a similar layout in a browser, you use a text editor. This is where you put all your code and content. For the PC, it’s Notepad; for the MAC it’s TextEdit.
Below is the code (in green) and text for this page.

<html>
<head>
<title>Why I like to go swimming</title>
</head>
<body>
<h1> Why I like to go swimming in the summer. </h1><p> Swimming is my most favorite activity in the summer. When the sun is shining and the air is warm, you will find me dipping into my backyard pool. It’s not an impressive pool, only three feet deep, but it’s mine.</p>
<p>There are three reasons I like to swim:</p>
<ul>
<li>I get lots of exercise</li>
<li>I enjoy the freedom</li> <li>I have an opportunity to be in the sun.</li>
</ul>
</body>
</html>

Here’s what it looks like online:

Notice the tags are gone in the browser? That’s because the tags tell the browser how to display files but do not show themselves.

 CHAPTER 2 

Basic Concepts

The good news is that HTML is written in plain text. That means you don’t need any fancy software programs to write your code. All you need is a simple text-editor that’s already on your computer. On PCs, it is Notepad and on MACs, it is TextEdit.

Some rules

As with most things in life, there are rules. In HTML, the rules are fairly simple. First I will give you a new list of words, and then I will show you how to use them.

Tags/Elements

HTML has what is called tags. They are  angled brackets <… >. You’ll find these brackets on your keyboard just above the comma and period. Inside these tags are words or letters that tell the computer what to do. For example <hr> tells the browser to display a horizontal line. These words or letters are called elements.

Container and empty tags

There are two kinds of tags: container and empty.The container tag always wraps around text or graphics and comes in a set with an opening and a closing.

<html> opening tag
</html> closing tag

Notice the forward slash (/) on the closing tag. This tells the browser that the tag has ended.
On the other hand, the empty tag stands alone. The tag <br> is one that adds a line break. Empty tags do not have to be wrapped around text and do not require a closing.

Case sensitive


HTML is also not case sensitive. That means, you can use either lowercase or uppercase. <HTML> is the same as <html>. For consistency, use either one or the other. It's best not to mix and match. For our purposes, I have written our code in lowercase. 




 CHAPTER 3 

HTML structure.

All HTML documents are divided into two main parts: the head and the body. When you begin any new page, it must have a declaration: <!DOCTYPE html>. It’s telling or declaring to the browser that the following file is an HTML file.

To build any webpage you will need four primary tags: <html>, <head>, <title> and <body>. These are all container tags and must appear as pairs with a beginning and an ending.

Here is a diagram, showing the two main parts and the primary tags.




<html>…</html>
Every HTML document begins and ends with the <html> tag. This tells the browser that the following document is an html file. Remember, tags tell the browsers how to display information.

<head>…</head>

The <head> tag contains the title of the document along with general information about the file, like the author, copyright, keywords and/or a description of what appears on the page.

<title>…</title>

Appears within the <head> tags and gives the title of the page. Try to make your titles descriptive, but not more than 20 words in length. The title appears at the very top of the browser page on the title tab.

<body>…</body>

The main content of your page is placed within the body tags: your text, images, links, tables and so on.

Nesting

Part of the web page structure is called nesting. Notice above how the tag <title> is nested inside the <head> tag, while <head> and <body> are nested inside <html>.

Each new set of tags are nested inside other tags Think of it another way, like smaller boxes inside larger boxes.

Good job so far. Are you ready to build your first page? Then let’s go!









Watch Video 2
CHAPTER 4


Your first webpage

Using the primary HTML tags, mentioned in Chapter 3, you are now ready to create your first Web page. Just follow the steps below.

Step 1

Open Notepad

Step 2 


Enter the following code inside the editor:

<!DOCTYPE html>

<html>

<head>

<title> Hello World</title>

</head>

<body>Hello world. This is my first web page. How do you like it?.

</body>

</html>



Step 3 



Create a folder and safe it



Step 4
Save the document as: helloworld.html in the HTML folder. Your file can be saved as either an htm or html file.  I save mine as html files. Whatever you decide

Step 5

To preview your new document, go to  the HTML folder and open the helloword.html file.  Your browser should open up and your page will appear. Like this:




Congratulations! 
You have successfully completed your first web page. It actually doesn’t get any harder than this for your simple, everyday page.



Now let’s learn some more tags.







CHAPTER 5

Basic Text Formatting

After any length of time on the Internet, you’ll notice that a webpage is made up of more than just plain words on a screen. There are headlines, paragraphs, graphics, colors and much more. It’s a lively place to be.
Our next tags--headline, paragraph, line break and horizontal rule--will help us make our current page a lot more exciting. Let’s learn how.

Paragraphs and Breaks <p>…</p>

Every time you want to begin a new paragraph, you use the paragraph tag. This is a container one, so you have to remember to have a beginning and an ending. Do you remember what an ending tag looks like? Here’s the tag with an opening and an closing:

<p>…</p>


To add a single line of space, you use the break tag:

<br>

This is an empty tag and stands alone. You can use the <br> tag to insert one or more blank lines.

Horizontal Rule
To create a horizontal line on your page you use the empty tag:

<hr>

Headline tag

One way to create bold copy in HTML is by using the headline tag. There are six levels of headlines, ranging from <h1>…</h1> to <h6>…</h6>. Here is an example of the code for all the headline sizes:
<h1>Level 1 Headline</h1>
<h2>Level 2 Headline</h2>
<h3>Level 3 Headline</h3>
<h4>Level 4 Headline</h4>
<h5>Level 5 Headline</h5>
<h6>Level 6 Headline</h6>


And here is how each level looks in a browser:


To begin using our new code, we are going to create a story about Muffins, the cat. Here is the text below, which we will mark-up with HTML code.

Muffins, the early years

Hi. My name is Muffins. I am a mighty cat. I was adopted by my family when I was only three weeks old.

My new mommy is a human. They are funny creatures.

Notice we have a headline, and two paragraphs. Just for fun, I’m going to include a horizontal rule just under the headline. Now let’s put some code around the text.

Step 1 

Load your text editor and enter the following.

<!DOCTYPE html>
<html>
  <head>
    <title>Muffins</title>
  </head>
  <body>
<h1>Muffins, the early years</h1>
<hr>
<p>Hi. My name is Muffins. I am a mighty
cat. I was adopted by my family when I was
only three weeks old.</p>
<p>My new mommy is a human. They are
funny creatures. </p>
  </body>
</html>


It should look like this in Notepad:




Step 2

Save the document as: muffins.html. Again, remember to save your file in the HTML folder. (See Managing Files for help)

Step 3


Go to the file and open  it. What do you see? Is it something like this? If not, go back and check your code.




Congratulations!

You created a page with a headline, a horizontal rule and two paragraphs. Way to Go!! That's great! 





CHAPTER 6 & 7 


Making a list and checking it twice

Lists come in a variety of forms they are either numbered or bulleted. The numbered lists are called ordered lists and the bulleted lists are unordered lists.
Lists are nested. There is a tag that identifies the type of list, like numbered or bulleted. Then within that tag there is another tag that itemizes the list. 

<ol>…</ol>

The ordered list is a container tag and is used for numbered lists.

<ul>…</ul> 

The unordered list is a container tag and is used for bulleted lists.

<li>…</li>

The listed item tag is a container tag and is nested within the ordered or unordered tags.

Here is an example of the differences between ordered and unordered lists.

An ordered (numbered) list goes like this:
<ol> <li>My first item on the list.</li>
<li>My second item on the list.</li>
<li>My third item on the list.</li>
<li>My fourth item on the list.</li>
</ol>

In the browser it will appear like this:
1. My first item on the list.
2. My second item on the list.
3. My third item on the list.
4. My fourth item on the list.

An unordered (bulleted) list goes like this:
<ul> <li>My first item on the list.</li>
<li>My second item on the list.</li>
<li>My third item on the list.</li>
<li>My fourth item on the list.</li>
</ul>

In the browser it will appear like this:
  • My first item on the list.
  • My second item on the list.
  • My third item on the list.
  • My fourth item on the list.

Let’s add a list to our story about Muffins.  I will be adding:

I left the pound with my new mommy and new sister, Maria. They took me straight to the pet store to buy:

  • A kitty baby bottle and formula
  • A small cloth toy
  • Litter box with litter
  • Food (for later)

Mom and sis had to feed me by bottle because I was so young.

Notice we have added two new paragraphs and a list. So let’s add that to our code.

Step 1

Open your text editor and open muffins.html. If you can’t see the file, you may have to enter the filename. Add the text and code listed in yellow below.

<!DOCTYPE html>
<html>
  <head>
    <title>Muffins</title>
  </head>
  <body>
<h1>Muffins, the early years</h1>
<Hr>
<p>Hi. My name is Muffins. I am a mighty
cat. I was adopted by my family when I was
only three weeks old.</p>
<p>My new mommy is a human. They are funny
creatures. </p>
<p>I left the pound with my new mommy and
new sister, Maria. They took me straight to
the pet store to buy:</p>

  <ul>
  <li>A kitty baby bottle and formula</li>
  <li>A small cloth toy</li>
  <li>Litter box with litter</li>
  <li>Food (for later)</li></ul>
  <p>Mom and sis had to feed me by bottle
because I was so young.</p>
  </body>
</html>



It should look like this in your text editor:


Step 2

Go to the file and open it. What do you see now?




Is it something like this? If not, go back and check your code.









Wow! You did it. Good work. You’ve learned a lot so far. 

Attributes

Now that you understand URLs, you may find it easier to understand how to write code for links. To start let’s look at the code:

<a href="http://www.nps.gov/moru/index.htm">Mount Rushmore</a>


Let’s look at all this code in more detail. Below is a graphical explanation.



Attributes inside the opening tag.

Inside the opening tag, you will see lots of information. Up until now we’ve been working with tags that are either single words or letters. With the link tag you have the addition of what is called an attribute. Simply put, an attribute adds more information for the browser. There is always a attribute name and an attribute value (what is it going to do). Let me see if I can explain each part.

href= stands for hypertext reference. It refers to the URL address. It is telling the browser that there is a hypertext link coming. You need to always put an equal sign (=) after href.  

URL Address is exactly what it says. You always have to enclose the address with quotation marks. (“…”) The address in this example points to the webpage for Mount Rushmore.

The link that appears on your page is written between the opening tag and the closing tag. In this case Mount Rushmore. Along with words, pictures can have links. We’ll explore that soon when we cover images.

Let’s go back to our Muffins story and add some links.

Step One

Open the muffins.html file in your editor

Step Two


Add the text that’s highlighted below:



Step Three
Save your file in HTML folder.

Step Four


Open your file. This is what it should look like in the browser. No? Did you remember the equal sign and the quotation marks?




Good Work! Now let’s learn how to add images to your webpage!





  CHAPTER 8 & 9  

Images Part 1

What would a webpage look like without graphics? Pretty boring to say the least! There was a time when the Internet was filled with just plain, boring text. Remember, in those early days the Internet’s sole purpose was to exchange information. The real change came when designers added graphics. Nowadays, we’ve become used to seeing bright and colorful pages.

Some details

It wasn’t always so easy to place images onto a webpage. From the start, images were memory and space hogs. But during the past several years, designers have worked hard to keep image files small, while also increasing the quality of the artwork that appears on the Internet today.
Three file formats have been developed to help keep files small, while maintaining a high level of quality:

.gif files: graphic interchange format (pronounced like Jif peanut butter)
.jpg files: joint photographic experts group (pronounced jay-peg)
.png file: portable network graphics (pronounced ping)

Images in 72-96 DPI–Say what???

Images come in all sizes and shapes. There is a real difference between images for print and images for the screen. Digital images are created by combining thousands of pixels— those little dots that make up an image on a computer screen. In fact, the period is close to the size of one pixel.
Images should be saved at 72 or 96 dpi (dots per inch).

You can find the size of your image by placing your cursor over the image and then right-click (Windows) or control-click (MAC) on it and  select Properties. A dialog box will appear. Click the Details tab and there you will find the dimensions (size) and resolution (dpi).

By knowing the dimensions of your image, you can then indicate the height and width in your code. More on this below.

The Image tag <img>

To place an image onto a page you will need to use the image tag. There are two very important things to remember about the image tag:
  1. It’s an empty tag (remember, that means there’s no closing tag, only a beginning).
  2. It requires attributes to be effective.

Here is the syntax:

The image tag <img> has several attributes:

src= identifies the image and tells the browser where to get the image.

Height= & width= tell the browser the size of the graphic (speeds up the downloading process).

alt= gives alternative text for those who are not viewing their pages with images.


Let’s go through each one of the attributes in more detail.

SRC= attribute

To help the browser identify and find an image, you use the following command:



<img src="filename.gif">


Alt attribute
When an image cannot be displayed by the browser blank boxes will appear. The alt attribute lets the user know what’s in the picture by providing descriptive text.

The alt attribute also helps those who are blind or visually impaired. These folks use screen reader software programs that tell them what’s displayed on the screen. The alt attribute text gives them a “picture” of what is present on the page.

Height & Width attribute

When placing your images in the webpage, the browser looks for the height and width of your images. This is an excellent feature because it allows the browsers to set the space size aside while laying out the balance of the page. If you do not specify the size, the browser will stretch it or reduce it to fit.

As discussed above you can find the dimensions of your images in the image properties dialog box.

Image Hotspots

Instead of using text as a link (hotspot), it's very common to use an image. It's simple too! Just include the image tag within the link tag<a>.

Here’s the syntax:

<a href="http://www.domainname.com">
<img src="filename.gif"></a>

Amazing!
You read through this whole chapter. Now let’s see if we can apply what we learned!

Adding images to our story

We will be adding a photo of Muffins to our story page. I’ve decided that I want the photo to appear just under the horizontal rule. Here are the attributes:
src= I have placed my image in a file called wpimages (wp stands for webpage) and that’s where I’m going to tell my browser to go for my photo. I save all my website images in this one folder to keep everything organized. You can do the same.
width=is 211 pixels
height= is 277 pixels
alt= text is “This is what I looked like when I was a baby kitten.”

Step One
Go to this link to get the photo of Muffins. Save it in a folder called wpimages within your HMLM folder

Step Two


Open muffins.html in your text editor. Let’s add this information (in yellow highlight) to our code, just under the horizontal rule.





Step Three
Save the file. Go to where you saved your file and click on it. What do you see now. Is it something like this?

Step Three
Save the file. Go to where you saved your file and click on it. What do you see now. Is it something like this?


Congratulations again!

Wahoo!!! You have created a webpage with text, an image and a link. What if you wanted to put the image at the end of the page or in the middle? Any ideas?  

Now let’s see if we can give the page some style!

CHAPTER 10

More formatting, blockquote, plus comments

So far we’ve learned how to put text and images on our webpage, but let’s say we want to change the look of the text. Easy. We’ll just use some more formatting tags, such as bold, strong, italic, emphasized, small and strikeout.

Bold

<p><b>Here is bold text.</b> </p>

Strong

<p><strong>Here is strong text.</strong></p>

Italics

<p><i>Here is italic text.</i></p>

Emphasis

<p><em>Here is text emphasized.</em> </p>

Small

<p><small>Here is small text.</small></p>

Strikeout/delete

<p><del>Here is text with strikeout.</del></p>


Now let’s try this on our own.

Step One
Enter the following code in your text editor.

<!DOCTYPE html>
<html>
  <head>
    <title>Formatting Text</title>
  </head>
  <body>
<p><b>Here is bold text.</b> </p>
<p><strong>Here is strong text.</strong></p>
<p><i>Here is italic text.</i></p>
<p><em>Here is text emphasized</em> </p>
<p><small>Here is small text.</small></p>
<p><del>Here is text with strikeout.</del></p>
  </body>
</html>

Step Two
Save the file as formatting.html in HTML folder.

Step Three
Open to view in the browser. Does it look like this? If not, best look over the code for a missing mark!









































































In this chapter, we are covering what’s called Inline Styles, which is part of CSS (Cascade Style Sheets). I am not covering CSS in this tutorial, but am introducing you to a “taste” of what is possible. At the end of the next chapter I talk a little bit more on CSS. However, I suggest after you finish this tutorial you refer to the resource tab and visit the sites I recommend for future study.


Style Attribute
As with all attributes, Style must appear in the opening tag of the element. For example:

<h1>style=”color:red”>This headline</h1>

This line of code is telling the browser to make the words”This headline” a first level headline (<h1>, the largest) and in red.

I could also use the style attribute to select a font I want, like Arial. Here’s the code:
<h1 style="color:red">Headline One</h1>
<h1 style="font-family:Arial">Headline One</h1>


But to save space, I create a style for one line by combining the color and font-family, like this:

<h1 style="color:blue;font-family:Arial"> Headline Two</h1>

Notice the color and font-family are inside the quotes and separated by a semi-colon (;).

Font-Family and Color
Let’s see if we can create three different colors with three different fonts.

Step One
Enter this code into your text editor.

<!DOCTYPE html>
<html>
  <head>
    <title>Styles</title>
  </head>
  <body>
<h1 style="color:red;font-family: Times New Roman, Times,serif;">Headline One</h1>

<h1 style="font-family:Arial,Helvetica,sans-serif;">Headline Two</h1>

<h1 style="color:blue;font-family:courier,courier new;"</h1>Headline Three</h1>
  </body>
</html>

Step Two
Save the file as style.html.

Step Three

Open the file and view it in the browser. Does it look like this? If not, best look over the code for a missing mark.


CHAPTER 11

Styles Part II

There are two more style elements I want to cover: text-align and background-color.

Text-align
You can tell your browser to align your text to the right, to the center and to the left*. It’s all done with the text-align command.

It’s pretty simple. Let’s add it to the code we’ve done so far.

Step One
Open style.html. Add the highlighted code listed below.

<!DOCTYPE html>
  <head>
    <title>Styles</title>
  </head>
  <body>
<h1 style="color:red;font-size:15px; text-align:right;">Headline One</h1>
<h1 style="font-family:Arial,Helvetica,sans serif;font-size:40px; text-align:center;">Headline One</h1>
<h1 style="color:blue;font-family:Arial;font-size:60px; text-align:left"> Headline Two</h1>
  </body>
</html>

*Note: You really don’t have to enter text-align:left as this is the default alignment.

Step Two
Save the file.

Step Three

Go to where you saved the file and open it.Your browser should look like this. If not, you know what to do–go back and check your code.





Back-ground color
The last style we will talk about is background-color. This goes into the opening tag of <body> like so:

<body style="background-color:coral">

Let’s take the code from the page above and add some background color (see highlighted code). By now you should know how to open your style.html file and make the changes.

<!DOCTYPE html>
  <head>
    <title>Styles</title>
  </head>
  <body style="background-color:khaki">
<h1 style="color:red;font-size:15px; text-align:right;">Headline One</h1>
<h1 style="font-family:Arial,Helvetica,sans serif;font-size:40px; text-align:center;">Headline Two</h1>
<h1 style="color:blue;font-family:Arial;font-size:60px; text-align:left"> Headline Three</h1>
  </body>
</html>

Save the file again and open it up  in your browser to see what it looks like:





If we wanted to change the red title to white, how would you change the code?

Style Syntax
Remember that all those punctuation marks are important when you are writing your code. In the Style attribute, you have to remember:

  • the equal sign after the word style (=),
  • to include your value (color, size, etc) in quotation marks (“),
  • to separate each command with  semi-colons (;),
  • to end the opening tag with an angled bracket (>).

Remember, one missing mark and your page won’t display properly.




 Final Review 



Let’s see what we’ve learned from the top:
  • HTML is a markup language and is the hidden code behind webpages.
  • Tags (angled brackets) and elements (letters or words between the angled brackets) tell the browser how to display the page.
  • Tags can be container (those with an end) or empty (stands alone).
  • Every webpage must have the following container tags:
<html>…</html>

<head>…</head>

 <title>…</title>

<body>…</body>

  • Tags are nested within each other.
  • There are six sizes in the container headline tag, ranging from <h1> largest to <h6>, smallest.
  • To create space between paragraphs, use the  paragraph tag: <p>…</p>
  • To create a line break, use the empty break tag: <br>
  • To make a line,use the empty horizontal rule tag: <hr>
  • Lists are usually numbered or bulleted. HTML lists are nested with the listed item tag nested within the ordered or unordered container tag:
<ol>…</ol> Ordered list tag

<ul>…</ul> Unordered list tag
<li>…</li> Listed items tag
  • To create hyperlinks, you must first get the URL address with the file name you need.
  • Attributes give more information inside the element. They always go into the opening tag and have two parts.
Attribute name
Attribute value
  • The link container tag is <a>…</a> and requires the attribute href= followed by the URL and/or webpage file.
  • The image tag <img> is empty but ends with a forward slash and an angled bracket.
  • The following attributes are in the <img> tag:
scr=
alt-
height=
width=
  • You can create a hotspot or link on an image by using the <img> and <link> tags.
  • To format your text,  you can use the following:
  • Bold <b>...</B>
  • Strong <strong>…</strong>
  • Italics <i>...</i>
  • Emphasis <em>…</em>
  • Small <small>…</small>
  • Strike out/delete <del>…</del>

  • To indent sentences or paragraphs, use blockquote: <blockquote>…</blockquote>.
  • Comment allows you to add notes on the coded page without the browser showing it. Great for notes to yourself.
  • Inline styles are used inside the opening tag.

<h1 style=”color:red”>…</h1>

  • You can change the color (color:), font (font-family:), size (font-size:) and alignment (text-align) of the text by using styles.
  • You can also change the background color (background-color:) with styles.
  • Style syntax  is very important. There are lots of punctuation marks, as in this example below.

<h1 style="color:blue;font-family:Arial;font-size:60px; text-align:left"> Hello World.</h1>

  • Cascade Style Sheets (CSS) are files that contain the formatting code for a webpage or website. You can style three ways with CSS:
Inline
Internal
External





No comments:

Post a Comment

Subscribe to: Post Comments (Atom)