HTML 102

Visitors
HTML 102 and a small bit of CCS ( Hypertext Markup Language) and (Cascading Style sheets)

Prepared by George Owings
Introduction:
HTML is a very syntax specific language and all spacing, quotes and bracketss have to be exact or the browser you are using won't recognize the code.

I have a lot of html code I will present to you to examine, study and rearrange in different ways. Consider all green text to be an assignment. All codes will be purple. I want you copy-paste the examples into an editor at the website;
Code editor:Code Editor takes you to https://jsfiddle.net/

Another Code Editor You can also use the editor at this website to test your code. takes you to https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_document

Run the program. examine the code and see what it does. The html style tags for background color let's you spice up presentations.
The protocol for html background color is;

<p1 style="background-color:Tomato;">Tomato Color</p1>

Tomato Color

There's a great number of available colors like red, purple, orange, lime, cyan, pink, tomatoe,blue, etc.. Simple replace tomato with the color of your choice and change the background color. You can use either the color name like tomatoe of the color number like #FFFFF or the RGB method. Most programmers pick a method and stick to it. I just name the colors.
At the below web site the colors and number codes are listed.
color types Colors   <-- Takes you to color naming website , or check below;

This next one would turn all back-grounds of all these pages a particular color. You have to try it;
<body style="background-color:yellow">
I will not try it here because I want to keep my background white. Use the <body> element you have and adapt.
Pink is a great color
Great green color
Cyan is a lovely color

Font color

Just replace the style tag background-color with color and you are set to indicate the font color.

<p1 style="color:tomato;">Tomato Color</p1>
<h5 style="color:green">Green color</h5>

Background-color, font color and border color are all styles and use similar protocol.
When you use the border style you have to let the browser know how thick you want the border to be and you do this with pixels "px".
You can use all three styles (font color, background-color and border) at the same time if you wish. In the below code example notice the quotes are on the beginning and after the end of the multiple styles.

<p3 style="border:5px solid Tomato; color:blue; background-color:cyan"; >Colors are great</p3>

Colors are great

Pay attention to the protocol . There will be times when you need a space in the code and times when you don't. The syntax is absolute in most cases. . Copy and paste the above and then run the web page. Change the border color and thickness, font colors and background-color and run again.

When you use a dark background-color you want to lighten your text color. Don't forget the gray backgrounds in different shades.
<p style="color:white"; "background-color:blue">Sometimes lighter text is better</p>

Sometimes lighter text is better:
<p style="color:white; background-color:blue";>Sometimes lighter text is better</p>

This will be a tough one- make a full coded page which demonstrates everything You have learned so far. Code a page recommending how I could improve my instructions so far.

Email them and call if you are having problems.

Adding images to your web page(s)

There are 3 different parts to the code that add images to the web page. The image and src tag which tells the browser what image you are adding and where it is so the browser can retrieve and display it. and the alt (alternative) tag which will default as the image if the original image cannot be found and the style (width and height in pixels "px").

I am Using jpgs as images. Gif images will work also. Your code converted to .html should in the same folder as the images folder that contains all the images you will be using. The forward slash '/' before your image name in the below code tells the browser where to look for the image. The code is really touchy. I had my image ending .JPG capitalized in the folder but in the code I had .jpg and the images refused to show up. Be forwarned, it can be tricky.

"

Using simple syntax html allows you to put fotos of your choice in a row at different sizes. Put a line break <br> between them and they will be in a column.

<!DOCTYPE html>
<html>

<body>
<img src="/Images/birds/Brown-Pelican.jpg" alt="Sample image" width="200 height="130">
<img src="images tutorials/Bird1.JPG" alt="bird1.jpg" height="100" width="130">
<img src="images tutorials/people.JPG" alt="people1.jpg" height="150" width="110">
<img src="images tutorials/pool.JPG" alt="pool.jpg" height="60" width="90"></font>
<img src="images tutorials/windows.jpg" alt="people1.jpg" height="100" width="180">
<img src="images tutorials/flowers1.JPG" alt="pool.jpg" height="133" width="100"></p>
</body>
</html>

Use notepad or wordpad to make place your code and convert to html endings. Copy paste these into your code and replace my image names with yours. If you have real problems email or call me (not at two in the morning). Observe and then change sizes to know the effects. To correctly proportion different sizes in an image you must use the the same ratios of height and width or the images will be distorted. If you add a linebreak (<br>) after the closing bracket for each image you will form a column of images.

<img src="images tutorials/Bird1.JPG" alt="bird1.jpg" height="100" width="130"><br>

New exercise: Make two rows of 6 jpegs each use the same image for each of them. Do resizing with them and try some line breaks to make your page look better. Now change the name of the images to match some other photos in your images folder.

You known how to make tables, but let's try putting images in them.

Tables and Images

Study the below code. Make your own table with 2 rows and 2 columns. Place images in them. Using the same table ajust the code for 3 accross and 3 down. Call me if this is too hard and we will work thru it together. When you adjust the width and height it may exspand your cell sizes so reduce them to fit as tight as possible. If you are familar with photoshop you can customize image size so the height width ratio is the same and you can ajust all your images to be the same size and they will fit your table perfectly with-out distorting the image.

<table>
<h1>Tables and Images</h1>
<table border="5px" bordercolor="black">
<tr>
   <th><img src="images tutorials/Duck2.JPG" alt="" duck1.jpg height=100 width=100></th>
   <th><img src="images tutorials/bird4.JPG" height=100 width=100></th>
   <th><img src="images tutorials/Mallard.jpg" alt="" duck1 height=100 width=100></th>
</tr>
<tr>
   <td><img src="images tutorials/car.JPG" alt="" duck1 height=100 width=130></td>
   <td><img src="images tutorials/people.JPG" alt="" duck1 height=100 width=100></td>
   <td><img src="images tutorials/car.JPG" alt="" duck1 height=100 width=130></td>
</tr>
<tr>
   <td><img src="images tutorials/pool.JPG" height=100 width=100></td>
   <td><img src="images tutorials/windows.jpg" height=100 width=100></td>
   <td><img src="images tutorials/bird4.JPG" height=100 width=130></td>
</tr>
</table>

Try typing image descriptions after an element. <th>Duck<img src="images tutorials/Duck2.JPG" alt="" duck1.jpg height=100 width=100></th>
and check it out. The best way to add text to a row is to add a new row and type in your text at the appropriate place. Later on, Using CSS, I will show you how to style your text perfectly in or around your images. You may want a new row for text for each row of images. Try it out.

Division elements can contain many headers or paragraphs between their brackets
Just as you styled a certain paragraph you can style a division with many paragraphs and everything within that division will have that styling.

<!DOCTYPE html>
<html>
<body>
<div1 style="color:blue";>Hello everone. Should javascript be taught in grade one?</div1>
<div2 style="color:red";>World</div2>
<p>The div element is a block element, and will start on a new line.</p></body>
</html>

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Outside the div brackets the text is normal you can make all kinds of style changes to anything inside the division brackets. Use the below example to practice with divisions. Practice with the div blocks. Make 4 divisions with different properties and 2 or 3 paragraphs in each on the same web page. In each division make different styles.

<!DOCTYPE html>
<html>
<body><div style="background-color:blue; color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<br>
<div style="background-color:green;color:pink;padding:20px;">
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<p>Outside the div brackets the text is normal.</p>
</body>
</html>

In html 201 we will study PHP which is a general-purpose scripting language that is especially suited to server-side web development, in which case PHP generally runs on a web server.
Any PHP code in a requested file is executed by the PHP runtime, usuallyto create dynamic web page content or dynamic images used on websites or elsewhere.
We will also cover classes, blocks and spend a great deal of time on Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones).
Responsive Web Design is about using HTML and CSS to resize, hide, shrink, enlarge, or move the content to make it look good on any screen:

The <canvas> element gives you an area to draw geometric shapes or place text in. The protocol is below. Notice that in the example text can be written all around the 2 canvas elements but none is inside the canvas.

Hello
Hello
Hello

<!DOCTYPE html>
<html>
<body>
Hello<br>
<canvas id="myCanvas" width="200" height="200" style="border:4px solid #000000;">
</canvas>
<canvas id="myCanvas" width="50" height="300" style="border:1px solid #000000;">
</canvas>
Hello<br>Hello
</body>
</html>

Notice the positioning of the quotes. You can remove the quotes around the width and height values when you
follow them with px for pixels:You can also replace the color code '#000000' with black(or any other color).
When you are working with border colors use 'solid' and space before the color. This is because there are many borders that are not solid but dashed or dotted etc.
<canvas id="myCanvas" width=200px height=200px style="border:4px solid black;">

The canvases are html but you need to use javascript to put text or geometric shapes in them. We will be covering this in JS 201
If you are eventually interested in making games you will get to know the canvas tag well..

-------------------------------------------

Making your web pages look better:

If your text squeezes up against the screen it makes them harder to read and it doesn't look nice. The below code at the beginning of the body element sets your entire web page to indent 40 px on the left. Looks so much better. Later we learn how to set the whole body element styles with respect to font-family and background color.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<p>Hello</p>
</head>
Hello. Notice the nice margin on the left
<body leftmargin="40" marginwidth="40">
</body>
</html>

Adding a nice tan colored background to a division might be nice. I you you do a color back-ground to the body it will carry through your entire page. You can add as many types of body styles as you wish but remember they will carry thru the entire body. If you want to change the body color simply close out your body tags and add another opening body tag. This will keep the styling in the first body intact while you add different styling to your second body. You can also use div tags for the background-color but the 'indents' seem to only work with body styling unless you bring in CSS. Copy paste the below into your editor and change the margin cm numbers.

<style>
div {
background-color:tan;
margin: 1cm 2cm 3cm 4cm;
}
</style>
</head>

<body>
<p> This is it!</p>
<div>
<p>Look around and see for youself. <br> What a day.</p>
</div>
<p>Opps.....I stepped out of the division</p>
</style>
Making buttons in html is very easy but you are limited in what you can do with them. A bit of javascript and your choices soar. Notice the syntax in the below example. Buttons are a good way to call or use a lot of javascript.

<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="alert('Buttons buttons everywhere!')">Click Me!</button>

</body>
</html>
---------------------------------------------------
'marguee' This element enables you to do so many things using just html.
A simple version is:

This is a scroll!

Plain text and Waiting

---------------------------------------------------------------------------------------
<!DOCTYPE html>
<body>
<div style="color:red">
<marquee behavior=scroll>This is a scroll!</marquee>
</div>
<div>
Plain text and Waiting
</div>
</body>
</html>

In the above notice that the <div> element is styled to give text the color red and the marquee behavior is set to scroll.
The default is to scroll right to left. You can alter the 'marquee behavior' to give many different results.
--------------------------------------------
'<marquee behavior=alternate' bounces from left to right.
<marquee direction="right"> Right marquee direction</marquee>
<marquee scrollamount="20">Another example: SCROLLAMOUNT marquee equals 20</marquee>     This number 20 will be a fast scroll while 10 is normal

The below will push an image accross the screen. There are many free gif files with limited animation available on the internet. Make sure they are in the same folder as your code.
------------------------------------------------------------------
<marquee scrollamount="15" direction="up" behavior="alternate"><marquee scrollamount="15" direction="right" behavior="alternate"><img src="YourImage.gif" /></marquee></marquee>
--------------------------------------------
You can enter multible scrolls doing different things at the same time. Make a page of different scrolls doing different things. Try to scroll some images'like birds flying or something'.

You can scroll from either direction or from top to bottom. Notice the coding syntax in both of the below examples.
HTML marquee Tag
This text will scroll from bottom to up

HTML marquee Tag This text will scroll from left to right
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "up">This text will scroll from bottom to up</marquee>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "right">This text will scroll from left to right</marquee>
</body>
</html>

This is a scroll!

Plain text and Waiting

This is an alternate scroll!

This is a scroll!

<!DOCTYPE html>
<body>
<div style="color:red; background-color:blue">
<marquee behavior=scroll>This is a scroll!</marquee>
</div>
<div>
Plain text and Waiting
</div>
<div style="background-color:cyan">
<marquee behavior=alternate>This is an alternate scroll!</marquee>
</div>
<div style="color:pink; background-color:green">
<marquee behavior=scroll>This is a scroll!</marquee>
</div>
</body>
</html>

At this point I advise you to start CSS 101. You can compare the html and CSS methods of styling. If you are going to program a lot you will use a lot of CSS.

On to CSS 101
Go to Beginning of this web page