2024

Activity

Review

With a partner or in a group of 3, compare your notes, and fill in your notes with anything that you learn from your group. Focus on the following questions

remember, in CSC 106 quizzes are in class, proctored, no resources except your own notes

Are there any vocabulary terms that we learned today?
What are the key ideas and concepts?
What could the material we learned today be used for?
What questions do you have after today’s lesson? this might be clarifying or things you want to know more about.

Check-in

Work in your group to make sure you can all answer the following questions and agree on the answers. Once you have your answer, click on the question to see the answer.

1. What is HTML? Where does it come from? What is it for?

HTML stands for HyperText Markup Language. It is the standard markup language for creating web pages and web applications. The HTML standard, or the rules for how it works is maintained by the World Wide Web Consortium.

HTML describes the structure of a web page semantically. Its primary purpose is to allow the structuring of documents (such as headings, paragraphs, lists, links, images, and other elements) and to ensure that the content is properly interpreted by web browsers.

2. What different tags did we learn today?

Today we learned various tags such as:

h1 to h6 for headings
p for paragraphs
a for links
br for line breaks
img for images
ul and li for unordered lists
ol and li for ordered lists

3. What is the structure of a tag? What parts does each tag have?

A tag in HTML consists of:

Opening tag: Indicates the beginning of an element and is enclosed in angle brackets,
Content: The content of the element, such as text or other elements
Closing tag: Indicates the end of an element, also enclosed in angle brackets but prefixed with a slash
Attributes: Provide additional information about the element and are always included in the opening tag. An example attribute is the href attribute in an code tag to tell the link where to link to. Attributes are written within the tag's opening bracket

Practice

Codepen is a tool that lets you practice writing code all in one page.
I made a template pen if you want to get practice by adding your own tags to an example web page. You do not need to make an account to do the activity, but if you do make an account you can save your progress and have this for future reference.

Challenge

For these exercises, do not use any resources outside of this site, codepen, and your browser inspect tool (found by right clicking).
That means the URL of your browser should always start with https://csctd.github.io/2024/ or codepen.io during this exercise.

1. What does the blockquote tag do?

The blockquote tag is used to indicate a block of quoted text from another source within a document. It typically indents the quoted text and may display it in italics depending on the browser's default styling.

2. What does the code tag do?

The code tag is used to define a piece of computer code. It is typically displayed in a monospace font and may preserve whitespace and line breaks. This tag is used to represent code snippets within the text, like the word code above

3. What tag puts text in the browser tab? Where does that tag live?

The tag that puts text in the browser tab is the `title` tag. It is placed within the `head` section of an HTML document, specifically between the opening `head` and closing `head` tags.

4. What is the syntax of a comment (notes for other programmers who read code that does not show in the browser) in HTML?

In HTML, comments are used to add notes or annotations for developers and do not display in the browser. The syntax for a comment in HTML is:

``

The comment starts with `!-- and ends with --`. Anything between these markers is considered a comment and is ignored by the browser when rendering the webpage.

Extra Challenge, Understand this page

view this page on GitHub
How do the questions above with hidden answers work?
What markdown syntax maps onto different HTML tags we have learned