Lesson 3. HTML code structure
HTML practice page
Lesson 3
~~~
“The victory goes not to the fast nor to the strong but to those that practice, practice, practice”
~ Brudder J ~
~~~
For those of you that followed the resource links to W 3 schools and also downloaded your textbooks from sitepoint (or even did just a little curious research in the study assignment) then you already know lesson 1 was about teaching you the tags used by HTML to communicate between other software languages how to present and render the HTML code to the end user…
in HTML practice lesson 3 to we will be looking at the proper block structure for code as well as what we learned in our first lesson.
In lesson 2 – I quickly reviewed how to open “Notepad” text editor if you’re running on a Windows laptop or desktop.
In part 2 – lesson 2… I told you how to download a text editor called “Anwriter” if you’re doing these lessons from a mobile Droid device.
Note: this website is not interactive for a specific and good practical reason…
Most of your web development will take place online inside your development environment.
Therefore, to get you comfortable with this fundamental reality you will need to copy the exercise from this web page and paste it to either Microsoft Word or notepad (or whatever text software you have).
As we get further in the lessons you must have a text editor in order to proceed with the lessons. For the first four or five lessons you should be good to go with just Microsoft Word (or any word processing software you have available).
These exercises are repetitive by design so that when you start actually writing code you will only have two think about writing code and not the structure.
So do the exercise all the way to the end.
~~~ lesson instructions.
Below each line of text that you see…
Use the empty line that is provided to..
Manually type in the text exactly as what you see…
Be certain that you type in spaces, punctuation, text and numbers exactly the way you see them on the page.
~ When software interacts it perceives spaces and punctuation as a part of the code structure the same as it does text and numbers.
So Below each line of text use the space provided to copy exactly what you see
This assignment contains one example and 10 exercises.
~~~
Take note of the block structure for the code below in example 1.
You do not need to copy this call block example… just pay attention to it.
The rest of this exercise will have space provided for you to copy the code but in this example I want you to see the proper code block format
~~~Example 1 block structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>…</title>
</head>
<Body>
<h1>…</h1>
<p>…</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>…</title>
</head>
<body>
<h1>…</h1>
<p>…</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>…</title>
</head>
<body>
<h1>…</h1>
<p>…</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>…</title>
</head>
<body>
<h1>…</h1>
<p>…</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>…</title>
</head>
<body>
<h1>…</h1>
<p>…</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>…</title>
</head>
<body>
<h1>…</h1>
<p>…</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>…</title>
</head>
<body>
<h1>…</h1>
<p>…</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>…</title>
</head>
<body>
<h1>…</h1>
<p>…</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>…</title>
</head>
<body>
<h1>…</h1>
<p>…</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
~~~
<!DOCTYPE html>
<html>
<head>
<title>…</title>
</head>
<body>
<h1>…</h1>
<p>…</p>
</body>
</html>
