HTML Reviewer PDF

1 of 19 TLE Reviewer
Lesson 3: Intro to HTML
Overview
This lesson introduces to HTML as a solution to the problem of how to

communicate both the content and structure of a website to a computer.
The lesson begins with a brief unplugged activity demonstrating the
challenges of effectively communicating the structure of a web page. The
class looks at an HTML page in Web Lab and discusses how HTML tags
help solve this problem, then uses HTML to write the first web pages of the
unit.
Vocab
• HTML - Hypertext Markup Language, a language used to create web
pages
• HTML Element - A piece of a website, marked by a start tag and often
closed with an end tag
• HTML Tag - The special set of characters that indicates the start and
end of an HTML element and that element's type
• Website Content - The raw text, images, and other elements included
in a web page
• Website Structure - The purpose of different pieces of content in a
web page, used to help the computer determine how that content
should be displayed
New Code
• <p></p>
• <html></html>
• <head></head>
• <!DOCTYPE>
• <body></body>
EXAMPLE:
<html>
<head>
<title>Exploring HTML</title>
</head>
<body>
<h1>Welcome to Web Lab!</h1>
<h2>This is a web page</h2>
<p>You are looking at an actual web page written in HTML, the
language of the web. On the left side you can see the code used by
your computer to create this page.</p>
<h2>Inspector Tool</h2>
<p>Use the Inspector tool to see what pieces of code are linked to
what text on the web page. Go through it with a partner so you can
discuss what you're seeing.</p>
<h2>Discuss</h2>
<p>With a friend discuss the following questions:</p>
<ul> (for bullets)
<li>What text is appearing in both the code and the web page?
</li>
<li>How is this language communicating extra information
about the way to represent text?</li>
</ul>
</body>
</html>
HTML Tags
What is HTML?
In order to display a web page a computer needs to know a lot more than
just what words or images should be on the screen. It needs to know where
to place the content, what size to make it, what fonts and colors to use, and
lots of other information that turns ordinary text and images into a full web
page.
To solve this problem computer scientists have created languages that
communicate this extra information. HTML, short for Hypertext Markup
Language, is one language that helps solve this problem. Using a system
of tags HTML lets a programmer indicate the purpose of different parts of a
web page. This lets the computer know how it should display these different
elements.
HTML Tags
HTML indicates the purpose of different parts of a web page by surrounding
them with pairs of opening and closing tags, like in the example below.
HTM
L Tag Name What it does
Tag
Opening
Start of a paragraph. Paragraphs are just blocks
<p> Paragraph
of text in your web page.
Tag
Closing Marks the end of a paragraph. An end tag is

</p> Paragraph always just the opening tag with a / at the
Tag beginning.
Default Tags
All HTML pages include a common set of tags. They're so common, in fact,
that all Web Lab projects will start with them added already.
HTML Tag What it does

This starter code is included in each Web Lab

project. The different tags are explained below.
<!DOCTYPE Tells the computer that this is a document written in

html> HTML
<html> Indicates the beginning of your code written in HTML
Contains information (sometimes called "metadata")

<head>
about your web page
<body> Contains all the main contents of your web page
Add Text to the Body

When you start any Web Lab project, it will automatically add <!
DOCTYPE>, <html>, <head>, and <body> tags to your project. When you
add content to your projects, you'll need to do it between the <body> and
</body> tags because it should be part of the body of your webpage.
Use Paragraph Tags

The <p> </p> tags or "paragraph" start and end tags are placed around
text to indicate that it is part of a paragraph. Placing text between
paragraph start and end tags lets the computer know that it should be
treated differently, often just spacing it out from other text.
LESSON 4: Headings
Overview
This lesson continues the introduction to HTML tags, this time with
headers. The class practices using header tags to create page and section
titles and learns how the different header elements are displayed by
default. Next, the class plans how to organize their content on the personal
web pages that will be built across the unit and begins the first page of the
project.
Vocab
• Heading - A title or summary for a document or section of a
document.
New Code
• <h1></h1>
What are headings?

Headings are the different sized section titles throughout a web page.
Headings add structure to your web page by breaking it up so its easier for
a user to read.
How do I make different sized headings?

Headings come in 6 different sizes. So far you have primarily used the
biggest one: <h1>. The number '1' in the HTML tag designates that this is
the biggest heading. The smallest heading is <h6>. You can also try the
<h2>, <h3>, <h4>, and <h5> tags, which get smaller as the number gets
larger.
What is HTML?
HTML stands for Hypertext Markup Language. HTML is used to add
structure to the content of a web page. HTML uses tags to specify where
certain structures start and end. These tags are sets of characters not
found in the English language so that the content and structure can be
differentiated.
What is an HTML element?

An HTML element is a piece of a website that is marked by a start tag and
sometimes closed with an end tag. The element also includes the content
inside the tags. For example:
What is an HTML tag?

An HTML tag is the special set of characters that tells the machine where
the start or end of an HTML element is and what type it is.
Headings and Paragraphs

Almost all pages that you create will have headings and paragraphs.
Headings
Headings are the different sized section titles throughout a web page.
Headings add structure to your web page by breaking it up so its easier for
a user to read.
Making Headings
There are six different heading tags: <h1>, <h2>, <h3>, <h4>, <h5> and
<h6>. The most common type of heading is <h1>. To use it, you put the
the text you want to display inside between the opening tag (<h1>) and
closing tag (</h1>).
The code for a heading will look like <h1>My Heading Text</h1>.
Size of Headings
There are different sized headings which are marked by the number next to
the h in the heading tag. They go from <h1> to <h6>.
Example Result
A‫خ‬A

1
<h1>Shoulders</h1>
2
<h2>Knees</h2>
3
<h3>Toes</h3>
Paragraphs
Paragraphs group together sets of sentences and put some space between
that group of text and the next group of text.
Making Paragraphs
Paragraphs are marked by opening(<p>) and closing(</p>) tags. To create
more than one paragraph you will want multiple sets of opening and closing
<p> tags. For example
1
<p>
2
This is a paragraph.
3
</p>
4
<p>
5
This is another paragraph.
6
</p>
The Problem Solving Process for Programming
Define
• Read the instructions carefully to ensure you understand the goals
• Rephrase the problem in your own words
• Identify any new skills you are being asked to apply
• Look for other problems you've solved that are similar to this one
• If there is starter code, read it to understand what it does
Prepare
• Write out an idea in plain English or pseudocode
• Sketch out your idea on paper
• List what you already know how to do and what you don't yet
• Describe your idea to a classmate
• Review similar programs that you've written in the past
Try
• Write one small piece at a time
• Test your program often
• Use comments to document what your code does
• Apply appropriate debugging strategies
• Go back to previous steps if you get stuck or don't know whether
you've solved the problem
Reflect
• Compare your finished program to the defined problem to make sure
you've solved all aspects of the problem
• Ask a classmate to try your program and note places where they
struggle or exhibit confusion
• Ask a classmate to read your code to make sure that your

documentation is clear and accurate
• Try to "break" your program to find types of interactions or input that
you could handle better
• Identify a few incremental changes that you could make in the next
iteration
LESSON 6: Lists
Overview
This lesson introduces ordered and unordered lists and the associated
<ul>, <ol>, and <li> HTML tags. The class practices using the tags, then
goes back to the personal web page project to add a new HTML page that
includes the new tags.
New Code
• <ul></ul> (BULLETS meaning unordered list)
• <ol></ol> (1,2,3,4,5… meaning ordered list)
• <li></li>
What are the two types of lists?

There are two types of lists in HTML, ordered and unordered lists.
What is an unordered list?

An unordered list is just a set of bulleted items.
An unordered list element has the tag <ul> </ul>. This is an
abbreviation for Unordered List. Each item in the list is marked by a list item
element <li> </li>. This is an abbreviation for List Item. The list item
element is a child element, which means that it goes inside of its parent
element, the unordered list.
How do I make an unordered list?

Making an unordered list has two steps: making the list and adding the list
items. To make the unordered list, write the unordered list tags <ul> </
ul>. Next, add your list items inside the unordered list tags. To make each
list item, use the list item tags <li> </li> and write the list item inside
the tags.
It can be helpful to indent your <li> </li> tags so it's clear they are
contained in the <ul> </ul> tags.
What is an ordered list?
An ordered list is a set of bulleted items which are numbered.
An ordered list element has the tags <ol> </ol>. This is an abbreviation
for Ordered List. Each item in the list is marked by a list item element <li>
</li>. This is an abbreviation for List Item. The list item element is a child
element, which means that it goes inside of its parent element, the ordered
list.
How do I make an ordered list?

Making an ordered list has two steps: making the list and adding the list
items. To make the ordered list, write the ordered list tags <ol> </ol>.
Next, add your list items inside the ordered list tags. To make each list item,
use the list item tags <li> </li> and write the list item inside the tags.
It can be helpful to indent your <li> </li> tags so it's clear they are
contained in the <ol> </ol> tags.
Lists
HTML has two types of lists, ordered and unordered.
Ordered Lists
An ordered list is a set of numbered items.
Example Result
A‫خ‬A

1
<ol>
2
<li>Step 1 </li>
3
<li>Step 2 </li>
4
<li>Step 3 </li>
5
</ol>
An ordered list element has the tag <ol> . This is an abbreviation for Ordered
List. Each item in the list is marked by a list item element <li>. This is an
abbreviation for List Item. The list item element is a child element, which means
that it goes inside of its parent element, the ordered list (<ol>).
Making an ordered list has two steps: making the list and adding the list items. To
make the ordered list, write the ordered list tags <ol> </ol>. Next, add your list
items inside the ordered list tags. To make each list item, use the list item tags
<li> </li> and write the list item inside the tags.
It can be helpful to indent your<li> tags so it's clear they are contained in the
<ol> tag.
Unordered Lists
An unordered list is a set of bulleted items.
Example Result
1
<ul>
2
<li>Red </li>
3
<li>Green </li>
4
<li>Blue</li>
5
</ul>
An unordered list element has the tag <ul> . This is an abbreviation for
Unordered List. Each item in the list is marked by a list item element <li>. This is
an abbreviation for List Item. The list item element is a child element, which
means that it goes inside of its parent element, the unordered list (<ul>).
Making an unordered list has two steps: making the list and adding the list items.
To make the unordered list, write the unordered list tags <ul> </ul>. Next, add
your list items inside the unordered list tags. To make each list item, use the list
item tags <li> </li> and write the list item inside the tags.
It can be helpful to indent your </li> tags so it's clear they are contained in the
<ul> tag.
Lesson 7: Intellectual Property and Images
Overview
This lesson covers how to use media such as images, video, or
music created by others in a website while respecting the rights of
the creator of that media. After first studying Creative Commons
licensing, the class learns how to add images to web pages, and
how to give proper attribution when doing so.
Vocab
• Citation - A quotation from or reference to a book, paper, or author,
especially in a scholarly work.
• Copyright - the exclusive legal right to print, publish, perform, film, or record
literary, artistic, or musical material, and to authorize others to do the same
• Creative Commons - A collection of public copyright licenses that enable the
free distribution of an otherwise copyrighted work, used when an author
wants to give people the right to share, use, and build upon a work that they
have created
• Intellectual Property - A work or invention that is the result of creativity, such
as a piece of writing or a design, to which one has rights and for which one
may apply for a patent, copyright, trademark, etc.
New Code
• <img >
How do I add images?

The <img> tag allows you to show images on your web page.
Example:
<img src="dog.png" alt="dog jumping">
In order to tell the browser which file to use, extra information,
called an attribute, is added to the tag inside the brackets. The
attribute src stands for source and tell the name of the image.
Image files names include extensions which tell the computer
which type of image they are working with. Common extensions

are .jpg, .jpeg, .png.
In addition to have the src attribute, image elements also have the
alt attribute which describe the image. This is important in case
the image doesn’t load or for people who have trouble with their
eyesight.
An <img> tag is an example of a self-closing tag because it starts

and closes in one tag.
Why does an image tag not have a closing tag?

An image tag doesn't need a closing tag because there is no text
content which must be wrapped in tags. The content that shows
on the screen is specified through the tags attributes.
What is an attribute?
Attributes are extra information included in a tag. Attributes have
names and values. The name tells what type of information is
being provided and then the value gives the specific information
for that tag.
For example <img> tags have two attributes, src and alt. src
specifies the name of the image file and alt tells the browser in
readable text what the image is.
The Details Matter

The src attribute needs to point to the exact filename of the image
you want to use. That means you need to pay attention to
spelling, capitalization, and the file extension.
Uploading Images
You can upload images that you've found elsewhere using the
Add Image button. Go find an image of a different type of pet that
you like and download it to your computer (using right-click "Save
As").
Once you have your images, click and upload the
image from your computer into your project, where you can then
use it in your page.
Images in HTML
The image tag allows you to add images to your page. You might notice that this
tag looks a little different than those you've seen before. Unlike paragraph,
header, or list tags, the image tag doesn't require a closing tag. All of the
information needed to display your image is contained within the tag itself.
Image Source and Alternate Text
In order to tell the browser which file to use, extra information, called an attribute,
is added to the image tag inside the brackets. The attribute src stands for source
and tells the name of the image, and the attribute alt describes the image.
• Create an image tag using the abbreviation img. This is considered a

self closing tag, since it doesn't need to wrap text as many other tags do.
• The src attribute is short for source. This tells the tag which image to
load. In this case, the page will look for an image with the filename
dog.jpg in the same directory as the page. Image file names include
extensions that tell the computer which type of image they are working
with. Common extensions are .jpg, .jpeg, and .png. Make sure to put
quotation marks around your image filename.
• The alt attribute is short for alternative text. While you won't see this
text on your web page, it provides a backup in case your image doesn't
download properly or for visually impaired users. In this example, if your
browser failed to load the image you would see
Creative Commons Search

Because the Creative Commons provides such a simple way to know what
media you can and can't use, a lot of search engines have integrated Creative
Commons filtering to ensure they only give you results you can use. When using
a search engine that supports Creative Commons filtering, you usually just need
to check a few boxes to make sure the media you find are licensed for your use.
Search Settings
When using a Creative Commons friendly search engine, you'll want to look for a
setting that controls the license of the search results. For example, Google Image
search has a dropdown that lets you select from a handful of different Creative
Commons licenses.
In general you should look for media that is licensed for non-commercial use. If
you plan to make any changes to the media you find (such as adding text to an
image) you'll also need to make sure you have the right to modify, adapt, or build
upon your search results.
Giving Credit
When you find an image or other media file you like, make sure that you not only
get a copy of the file, but that you also keep track of the information you'll need to
give credit to its creator. For every file you want to use, follow these steps:
• Download a copy to your computer (so that you can upload it to your
website in the next step)
• Write down all information you can find about the author, such as
◦ Name, or screenname
◦ URL of website (not URL of the image itself)
◦ Title of image
REMINDERS:
Visit code.org
Watch all the videos about your topic coverage for the quiz
Practice practice practice

HTML Reviewer PDF

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML Reviewer PDF

Hochgeladen von

Copyright:

Verfügbare Formate

1 of 19 TLE Reviewer

Lesson 3: Intro to HTML

This lesson introduces to HTML as a solution to the problem of how to

Closing Marks the end of a paragraph. An end tag is

HTML Tag What it does

This starter code is included in each Web Lab

<!DOCTYPE Tells the computer that this is a document written in

<html> Indicates the beginning of your code written in HTML

Contains information (sometimes called "metadata")

<body> Contains all the main contents of your web page

Add Text to the Body

Use Paragraph Tags

What are headings?

How do I make different sized headings?

What is an HTML element?

What is an HTML tag?

Headings and Paragraphs

The Problem Solving Process for Programming

• Ask a classmate to read your code to make sure that your

What are the two types of lists?

What is an unordered list?

How do I make an unordered list?

How do I make an ordered list?

Lesson 7: Intellectual Property and Images

How do I add images?

which type of image they are working with. Common extensions

An <img> tag is an example of a self-closing tag because it starts

Why does an image tag not have a closing tag?

The Details Matter

• Create an image tag using the abbreviation img. This is considered a

Creative Commons Search

Das könnte Ihnen auch gefallen