Tag Practice

<h1>Tags for Today</h1>

<b>Bold</b>

<h1>Heading 1</h1>

<title>The title in the tabs</title>

<p>Paragraph</p>

Use Codepen to create the following using HTML:

HTML Practice

I am learning to write a HTML, the hyper text markup language.

HTML gives structure to a web page.

For example, there are two columns in this section of the page. I used columns somewhere else...can you find where?

Think of the “structure” of a typed page. What elements does it have? HTML has elements, too. <head></head> contains DATA about the page. It is not displayed to the user. <body></body> contains all the elements of an HTML page. All the information displayed to the user goes in the <body>.

Images & Links

IMAGES

We add images with the <img> tag. We have a source (src) for the image which is a URL, a link, in “quotes.”

Try this:

<img src="http://bsk.education/images/ycla.png">

LINKS

We add links with the <a> tag. We have a hypertext reference (href) which is a URL- the link itself. We can put any text (or a picture) to click on, and then a closing </a> tag.

Try this:

<a href="http://bsk.education">Mr. S-K</a>

Let’s learn some new tools...

...and some new tags...

📍 Create a free Codepen account.

📍 Create a new Pen.

📍 Use these tags, and, in your page, explain to yourself how they function.

<h1>

<p>

<li>

<b>

<u>

<a href=""></a>

<img src="">

<em>

<strike>

<mark>

<title>

<head>

<body>

<html>

Cascading

Style

Sheets

CSS is a language used to describe the look and formatting of a document written in HTML.

CSS selects HTML elements and styles them using properties like font-size or color.

                    p {

                        font-family: Georgia;

                        font-size: 18px;

                    }

There are hundreds of CSS properties. We're going to focus in just a few to improve the readability of our pages.

HTML & CSS

🎯 Learning Targets

By the end of today, you will design and code your own webpage.

Now, we can start learning...

Hypertext

Markup