Subject: ELECT3 - Web Design Date: 28 November 2021

Name: Flores, John Paul G. Day: THS

[SURNAME, FIRSTNAME MI] [MWF] [THS] [WED] [SAT]

Section: CBET-25-503P Class No.: 14 Time: 03:00PM - 04:30PM

Task # 005

Topic # VI HTML

Sub-Topics:

A. About HTML

Imagine that you're building a house. One of the first things

you would do to build a house is put up a frame. There would
be nothing but plain, wooden beams in the rough shape of a
house, and you wouldn't be able to live in it yet, but it would
give an approximation of what the house would eventually
look like. The frame would provide the foundation you need to
keep working.

You can think of HTML as that frame for a webpage. HTML is a

computer language known as a markup language, and the vast
majority of the webpages you see on the Internet every day are made of HTML, among other things.

What are HTML elements?

Like the frame of a house might be composed of individual pieces of wood, an HTML document is composed
of individual HTML elements. Here is an example of a simple HTML element:

<p>This is an element</p>

Each HTML element is made up of tags, which for this element are the <p> and </p> symbols you see on
either side. You can think of them as a container, where the <p> tag marks the beginning of an element,
the </p> tag marks the end, and the content is the text in between.

The tags in the image below specify that the text inside is
a paragraph, which lets your browser know how to display
it. If you were to load that <p> element in a webpage, for
example, you would not see the <p> and </p> tags on
the screen. Your browser would just read those tags
as instructions to take the text in between and show it on
the screen, and to give that text a little space above and
below, and to let it take up a whole line on its own, just like
a paragraph printed in a book.
ELECT3 - Web Design Page | 1
In other words, HTML elements provide the structure of your page, just like the frame provides the
structure of a house. HTML elements generally look very plain on their own—we'll get to that later,
when CSS provides the presentation of your page—but they are the skeleton under all of the webpages you
visit.

Try this!

Consider a few paragraph elements together. For example:

<p>This is a paragraph</p>
<p>Then one more paragraph</p>
<p>It's just a bunch of paragraphs</p>

Try adding all of that HTML to the input below, then press the View HTML button. Make sure to type in the
tags exactly, but feel free to change the text inside.

View HTML
Add our CSS

You should see the HTML you entered appear as three lines of text with a bit of space between each one.
Notice that the <p> and </p> tags you entered don't actually appear; they're there behind the scenes
telling your browser what to display.

Nested elements

If you think of an HTML element as a container, it's important to note that text is not the only thing that can
go inside of it. Sometimes you will want to put one HTML element inside of another, which is referred to
as nesting the element.

For example, if you wanted to make one of the words in a paragraph italic, the HTML element <i> can do
that, but to pick out just one word in your paragraph, you would need to put it inside the paragraph
element. It might look like this, for example:

<p>Here is a paragraph with <i>one</i> word in italics.</p>

In this case, the paragraph element contains both text and

an italic element. It would display in your browser like this:

ELECT3 - Web Design Page | 2

Try this!

Try adding that HTML to the input below, then press the View HTML button. Make sure to type in the tags
exactly, but feel free to change the text inside.

View HTML
Add our CSS
You should see a line of text where only the word "one" is italicized. Try wrapping the <i> and </i> tags
around a different word, too, or around more than one word. Whatever you put inside those tags should be
displayed in italics.

How does that make a webpage?

A webpage is a collection of HTML elements in an HTML document. The HTML for a very simple webpage
might look something like this:

<h1>My Coding Blog</h1>

<p><i>February 13, 2020</i></p>
<p>I heard all the best web companies start out in garages. My garage is full of trash, though, so what am I
supposed to do?</p>

Most of the webpages you regularly visit are going to have more
elements than this, and there are some that your browser will
require by default. Don't worry about that for now, though. The
important thing to keep in mind is that an HTML document is a file, just
like any other file you might find on your computer. For example, you
could save the code above to your hard drive and call it website.html:

Then you could double-click it to open it with a web browser, just the
way one might open a Word Document in Microsoft Word. When your browser opens the file, it uses the
HTML you've written as instructions to determine what it should show on the screen.

The webpages you visit every day on the Internet are no different. When you enter a web address into your
search bar or click on a link, you're sending a request to a computer somewhere else, and that computer
sends you a response in the form of an HTML document. In turn, your browser reads that HTML document,
just like it would if you double-clicked an HTML file on your hard drive.

For instance, try clicking here to open the example as an actual

webpage. You should see something like this in a new tab or window:
Now follow these quick steps:
1. Right-click anywhere on the page you just opened.

ELECT3 - Web Design Page | 3

 2. Find and click the option that says View page source.
Depending on what browser you're using, it's possible that the
option may not be there. We recommend using Google
Chrome to ensure that you have the best experience
with these exercises.
3. Another tab or window should open, showing you the HTML of
the page.

Look familiar?

Most of the webpages you visit certainly look more complicated than what you see here, but the underlying
frame is still the same. No matter how elaborate they may be, the core is still HTML.

B. Create A Webpage

Once you have a basic grasp on what HTML actually is, you need to be able to see it work. A great way to do
that is to write and run your own HTML on your computer. This lesson assumes that you've set up your
workspace and are comfortable with the general skills that all of these tutorials require, so be sure to read
lessons if not.

Keep in mind that the HTML document you'll be creating in this lesson will only be available on your
computer; it will not be accessible by anybody else online. However, you will still be able to load it in your
browser just like the webpages you regularly visit.

Create the file

Follow these steps to create your first HTML file.

1. Open Sublime Text.
2. Open the File menu and select New File.

3. You should see a new tab open in

Sublime Text labeled untitled.
4. Go back to the File menu and
choose Save As.

5. Find the GCF Programming Tutorials folder you

created when you set up your workspace and double-
click on it.

6. Name your file index.html and press

the Save button.

ELECT3 - Web Design Page | 4

 You have now created an empty HTML file where you'll write your
first code in the following steps. There isn't anything
fundamentally different about the file you just created and a text
file, for example, which you could have named index.txt. The
difference is that the file extension (.html, as opposed to .txt) will
let any program trying to open the file know what kinds of
contents it will find inside.

The name you gave it, index.html, is a common name for

the home page of a website. You could name it mywebsite.html, or xxlovin2codexx.html, or whatever you
want, and it will work the same. The filename index.html is just a convention that has become popular over
time and lets any other programmer (or even you, if you forget) know which file is the main file of your
website.

Write your first HTML

Now that you have your empty index.html file open in your text editor, you can write your first HTML. Type
or copy the following into your empty index.html file:
<html>
<body>
<p>Hello, world!</p>
</body>
</html>

There are a few basic pieces to look at here:

➢ <html>: The html element is the base container for everything else on your webpage. Every other
element you add will go inside of this one.
➢ <body>: The body element is where you will put all of the actual content of your website. If you
were to leave it blank, you could still load the page, but you'd see nothing but a white screen. To
start, all we'll put inside is a paragraph element, which you saw in the last lesson.
➢ <p>: The paragraph element is just like the paragraph elements you've seen before. This one is just
nested inside other elements.

Only the <p> element will actually show up as something you can see on the page. The others are what is
often referred to as boilerplate code, meaning that they appear unchanged in just about every HTML
document because your browser requires them.
There are other pieces of boilerplate code that your browser requires before it will consider this a valid
webpage, but we'll get to those later.

Nesting

You might have noticed a few things about how that code
was formatted, too. For example, some of the elements are inside
other elements. This is another example of the concept of nested
elements that we covered before.

Remember that you can think of most HTML elements as containers.

For example, in the code above:

ELECT3 - Web Design Page | 5

 ➢ The <html> and </html> tags contain the <body> element
➢ The <body> and </body> tags contain the <p> element
➢ The <p> and </p> tags contain some text

Indentations

There are also indentations before some of the tags. They're there to make the code more readable to the
programmer working on it. Some people prefer to use the tab key to make these indentations, while others
prefer a few presses of the space bar, but in either case, the goal is to have an increasing amount of space
for each layer of nested elements, which makes it clearer which elements are inside of which.

As far as your browser goes, the amount you indent each element makes no difference. Your browser could
read that code formatted this way just as easily:

<html><body><p>Hello, world!</p></body></html>

That kind of formatting would make things much more difficult for you, though, and would make it much
easier to make a mistake if you wanted to change something.

View your webpage

Once you've filled in your HTML file and saved it, you can view it as a webpage in your browser. Just follow
these steps:

1. Open your File Explorer or Finder.

2. Navigate to your GCF Programming Tutorials project and click inside.
3. Double-click your index.html file.

The file should open in your default web browser. You should
see something like this:

Congratulations! You just created your first webpage!

Try this!

If you want to keep playing with these basic pieces, you can.
1. Go back to your text editor and change the text inside the paragraph element in index.html to say
whatever you want.
2. Save the file and refresh the page in your browser.
3. You should see your new text on the page.

C. Text Elements in HTML

Some of the most common HTML elements that make up a

webpage are text elements. All the text you read on this website,
for example, whether it's the titles at the top of the page, the
section headers, or this very text, is made from HTML text
elements.

The paragraph element

ELECT3 - Web Design Page | 6

The most basic way of adding text to a web page is the paragraph element. If you've been following along
with this tutorial, you've seen this element before, but it's worth repeating, because the paragraph element
is one of the most common HTML elements used on most of the websites you visit every day.
<p>This is a paragraph</p>

By default, every browser puts a bit of space above and below paragraph elements when they display them,
which keeps each paragraph independent from the ones around it, just like the paragraphs you'd see
printed in a book or magazine.

The heading elements

Like the paragraph element, heading elements are also used to display text on the screen. They're generally
used to create section headings.

<h1>This is a heading element</h1>

For example, you might use a heading element to display the title of
an essay you're writing, or the name of a chapter in a book. The
actual text of the essay or chapter, on the other hand, would use
paragraph elements.

Heading elements come in six default levels, <h1> through <h6>,

which you can think of as an order of importance. If you put
an <h1> on your web page, for example, it's safe to assume that it's the most important section heading and
probably at the top of your page, while an <h2> is slightly less and important, and so on.

They also come with some default browser styling, which reinforces that order of importance:
the <h1> element is the biggest, the <h2> is smaller, and on like that.

<h1>This is the biggest one</h1>

<h2>This one is a little smaller</h2>
<h3>This one is even smaller</h3>
<h4>They keep getting smaller</h4>
<h5>This one isn't even that big</h5>
<h6>Pretty small now, actually</h6>

Text formatting elements

Text formatting elements are used to change the way text looks in certain predefined ways. For instance,
here are a few common text formatting elements:

• Bold: The <b> element makes its contents bold.

• Italics: The <i> element italicizes its contents.
• Underline: The <u> element underlines its contents.

These elements are usually found nested inside of other text elements, such as the paragraph or heading
elements, because they are usually only meant to apply to part of the text. For example:
<p>These words aren't bold, but <b>these two</b> are.</p>

That HTML would be displayed like this:

ELECT3 - Web Design Page | 7
Try this!

Try experimenting with each of the elements covered in this lesson in the input below. You can enter
whatever you want, but if you need some ideas on what to enter, try using the elements below as an
example.

<h1>The Long Goodnight</h1>

<h3><u>Chapter 1: The City and the Silence</u></h3>
<p>Detective Hardcastle shuddered when he heard the knock at his door. Midnight on a Saturday, and
somebody was looking for a gumshoe? It smelled like trouble, because if he had learned one thing in his
time as a private eye, it was that all the city's ghosts came out at night.</p>
<p><i>I hope you're not looking for a fight</i>, he thought to himself. <i>Because if you are, you found
it.</i></p>

Enter your HTML elements in the input here:

View HTML
Add our CSS

Do it yourself!

Open the index.html file of your GCF Programming Tutorials project in your text editor, and let's add
some text elements. For the best understanding, be sure to actually type this code in, rather than copying
and pasting it.

1. When you first created this file, you already had one element of actual content on the page. First,
find that element:
<p>Hello, world!</p>

2. Go ahead and delete that element.

3. Instead, let's start making something that's more like a real webpage that you might actually see in
regular life: a movie review webpage. Start with a heading, and make sure to put it inside
the <body> element, where your <p>element was before:
<h1>Cinema Classics Movie Reviews</h1>

4. Just below that, let's add a sub-heading. While the first heading was the main heading of your whole
webpage, this one will just be the title for your review of a made-up blockbuster hit:
<h2>Review: Basketball Dog (2018)</h2>

5. Now let's add some text. This is the real meat of your review, so there are a lot more words, but
notice that they're still just wrapped in simple <p> tags, one for each separate paragraph. Add this
just below the <h1> element you just added:
<p>4 out of 5 stars</p>

ELECT3 - Web Design Page | 8

 <p>From director Vicki Fleming comes the heartwarming tale of a boy named Pete (Trent Dugson)
and his dog Rover (voiced by Brinson Lumblebrunt). You may think a boy and his dog learning the
true value of friendship sounds familiar, but a big twist sets this flick apart: Rover plays basketball,
and he's doggone good at it.</p>
<p>While it may not have been necessary to include all 150 minutes of Rover's championship game
in real time, Basketball Dog will keep your interest for the entirety of its 4-hour runtime, and the end
will have any dog lover in tears. If you love basketball or sports pets, this is the movie for you.</p>
<p>Find the full cast listing at the Basketball Dog website.</p>

6. Given that she's the director of the movie, it seems like "Vicki Fleming" might be the most important
name in those paragraphs, so let's make it bold to attract more attention to it. Wrap just that name
with <b> and </b> tags, like so:
<b>Vicki Fleming</b>

7. It also might be a good idea to set the star rating apart from the rest of the text, too.
Let's italicize that to separate it. Wrap just those words with <i> and </i> tags, like so:
<p><i>4 out of 5 stars</i></p>

Once you've done all of this, your complete code should look like this:

<html>
<body>
<h1>Cinema Classics Movie Reviews</h1>
<h2>Review: Basketball Dog (2018)</h2>
<p><i>4 out of 5 stars</i></p>
<p>From director <b>Vicki Fleming</b> comes the heartwarming tale of a boy named Pete (Trent
Dugson) and his dog Rover (voiced by Brinson Lumblebrunt). You may think a boy and his dog learning the
true value of friendship sounds familiar, but a big twist sets this flick apart: Rover plays basketball, and he's
doggone good at it.</p>
<p>While it may not have been necessary to include all 150 minutes of Rover's championship game in real
time, Basketball Dog will keep your interest for the entirety of its 4-hour runtime, and the end will have any
dog lover in tears. If you love basketball or sports pets, this is the movie for you.</p>
<p>Find the full cast listing at the Basketball Dog website.</p>
</body>
</html>

Double-click your index.html file to load it in the browser, and you should see this. Your webpage is starting
to look a little more like an actual webpage!

D. Metadata and the Head Element

The HTML we've been working with so far works, but it's
technically missing some pieces that every browser expects it to
include: the DOCTYPE declaration and the head element. Unlike
most of the elements you've worked with so far, though, these
ones are not focused on creating the structure of what you see
on the page. Instead, they're focused on establishing
the metadata of your webpage.

ELECT3 - Web Design Page | 9

Metadata

Metadata is often described as "data about data." In other words, if the HTML of your webpage is data,
metadata is additional information used to explain various things about that HTML. For example, one might
use it to establish:

➢ What version of HTML a webpage is using?

➢ The title of a webpage
➢ An image or text that sums up a webpage

In turn, anything that reads your webpage—a browser, or a social media platform like Facebook or Twitter
where it might be shared, or a search engine like Google that might automatically collect information about
all sorts of webpages—can use that metadata to tell people useful information about your webpage.

The DOCTYPE declaration

One of the most essential pieces of metadata that is required on every webpage is the DOCTYPE
declaration. It should be the first thing you see in an HTML document (we'll be adding it to yours shortly)
and looks like this:

<!DOCTYPE html>

This particular DOCTYPE declaration states both that an HTML document contains HTML, and that the
version of that HTML is HTML5. It's important because there are still plenty of webpages on the Internet
written in older versions of HTML. For example, some webpages might have a DOCTYPE declaration that
looks more like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

That declaration specifies an earlier version of HTML (4.1), which has some differences from HTML5. When
you load a webpage that doesn't have a DOCTYPE declaration, your browser goes into a special mode
called quirks mode. That basically just means that the browser is guessing what kind of HTML a webpage is
using, and when the browser starts guessing, it sometimes gets things wrong.

The head element

The rest of the metadata one might provide for a webpage goes inside of a special HTML element
called the <head> element. It looks like this:

<head></head>

Like many of the other HTML elements you've used, you can think of it as a container meant to hold all the
various types of metadata you might want to include. However, it's not part of the structure of your

ELECT3 - Web Design Page | 10

webpage; it's not visible when you load the webpage, and none of the elements you put inside of it will be
either.

The simplest version of a head element contains just one thing: the <title> element. The <title> element, as
the name suggests, should contain the title of your webpage. It's the only thing your browser requires the
head element to contain:

<title>My Very Good Webpage</title>

The <title> element lets anything that reads your HTML document know what to call it. For example, most
browsers use the <title> element to determine what to show in the tab for that webpage. If you were to
load a webpage with the above title element in your browser, you'd see this in your browser tab:

Real-world metadata

It may feel at first like metadata is unimportant—you can't see it doing anything on your webpage, after
all—but you're actually seeing metadata in use all the time in day-to-day life. For example, let's consider
this site. If you were to search for GCFLearnFree on Google, this would be your top result:

However, if you go to our homepage, you'll notice

that the description given on the Google result is
nowhere to be found on the page. That's because
Google has automatically pulled it from the
metadata included in our HTML:

<meta name="description" content="GCFGLobal - The freedom to learn what you want, when you want,
absolutely free! Check out our Everyday Life, Basic Math, and Computer Training today!">

Notice that this particular piece of metadata uses a <meta> tag,

which stores all of its information in HTML attributes, like you saw
when working with links and images.

If you were to share our homepage on Facebook, you'd see

something like this:

Just like before, the images and text you see there don't appear on
the homepage. Instead, they also come from a handful of slightly
different meta tags in the head element, these particular ones required by Facebook:

<meta property="og:title" content="Free Online Learning at GCFGlobal">

ELECT3 - Web Design Page | 11

<meta property="og:description" content="GCFGLobal - The freedom to learn what you want, when you
want, absolutely free! Check out our Everyday Life, Basic Math, and Computer Training today!">
<meta property="og:image" content="https://media.gcflearnfree.org/global/layout/social/gcf-website-
image.png">

In other words, metadata doesn't necessarily tell you or show you much when you're just looking at your
own webpage, but it does a lot to help your browser make sense of your HTML, and it can provide tools for
things like social media platforms and search engines to understand and explain what your webpage is all
about.

Do it yourself!

Open the index.html file of your GCF Programming Tutorials project in your text editor, and let's add some
metadata.
1. First, go to the very top of your file and add this before anything else:
<!DOCTYPE html>
2. Next, find your opening <html> tag. All of your structural HTML elements go inside of
the <html> element, and the rest of your metadata does too.
3. Add your <head> element there, after the opening <html> tag and before the opening <body> tag.
Be sure to indent it to the same level as the <body> element for readability:
<head>
</head>
4. We left an empty line between the <head> and </head> tags because we're going to add the title
tag there. This is the title of the webpage, and we're making a movie review site, so let's give it a
name that reflects an interest in respectable films like Basketball Dog:

<title>Cinema Classics Movie Reviews</title>

Once you've done all of this, your full code should look like this:
<!DOCTYPE html>
<html>
<head>
<title>Cinema Classics Movie Reviews</title>
</head>
<body>
<h1>Cinema Classics Movie Reviews</h1>
<div>
<h2>Review: Basketball Dog (2018)</h2>
<img src="https://media.gcflearnfree.org/global/coding/basketballdog.png">
<p><i>4 out of 5 stars</i>
<p>From director <b>Vicki Fleming</b> comes the heartwarming tale of a boy named Pete (Trent
Dugson) and his dog Rover (voiced by Brinson Lumblebrunt). You may think a boy and his dog learning the
true value of friendship sounds familiar, but a big twist sets this flick apart: Rover plays basketball, and he's
doggone good at it.</p>
<p>This movie has everything you could ask for:</p>

ELECT3 - Web Design Page | 12

 <ul>
<li>Basketball</li>
<li>A dog</li>
<li>Nail-biting suspense</li>
</ul>
<p>While it may not have been necessary to include all 150 minutes of Rover's championship game in
real time, Basketball Dog will keep your interest for the entirety of its 4-hour runtime, and the end will have
any dog lover in tears. If you love basketball or sports pets, this is the movie for you.</p>
<p>Find the full cast listing at the <a href="https://edu.gcfglobal.org">Basketball Dog</a> website.</p>
<button>Show Next Review</button>
</div>
</body>
</html>

Open the File Explorer or Finder and navigate to your GCF Programming Tutorials project, then double-click
your index.html file. Your webpage should open in your default browser. Keep in mind that the <!DOCTYPE
html> addition is metadata just for your browser—you won't see it on the page—but now that you have it,
your browser will consider this to be valid HTML.

As for the <title> element you added, check the browser tab and you should see the title of your website
now. It should look like this.

Congratulations, you just wrote your first metadata!

ELECT3 - Web Design Page | 13

References:

1. https://edu.gcfglobal.org/en/basic-html/about-html/1/

2. https://edu.gcfglobal.org/en/basic-html/create-a-webpage/1/

3. https://edu.gcfglobal.org/en/basic-html/metadata-and-the-head-element/1/

4. https://edu.gcfglobal.org/en/basic-html/text-elements-in-html/1/

ELECT3 - Web Design Page | 14