Welcome to the Web!

lesson.md

How are webpages made?

Goal: understand the basic elements that webpages are built from.

Intro to tags

HTML is a language for expressing documents. The webpages that we see are just HTML documents.

Do this: Make a new file and call it mywebpage.html. Try typing some text into this document (like Hello World!), then right click and open it with Chrome.

• Markup language
  • Write content like normal, then mark it up with tags that modify the presentation
  • Most tags have this structure <tag>content</tag>

Do this: Surround the text you added with a i tag, like this: <i>Hello World</i>.

Notice how the text shows up, but your tags do not. They just affect the presentation of the content.

• Other tags that format text
  • b makes things bold
  • s strikes text
  • sub makes text a subscript
  • sup makes text a superscript

Do this: Try nesting two tags like this: <b><i>Hello World</i></b>

Tags as structure

Some elements define structure. These include heading tags, like h1.

Do this: Add new text and wrap it with a h1 tag. Your document now looks like this: <h1>My Webpage</h1><b><i>Hello World</i></b>

Not only did the h1 text become bolder and bigger, new space appeared beneath it. Notice that if you didn't have a new line between the elements, they still appear on two lines in the browser.

• Other tags that structure the document
  • h2 h3 h4 h5 h6 are all headings of different levels of importance. 1 is the highest, 6 is the lowest
  • p clusters a bunch of sentences into a paragraph
  • section clusters a bunch of paragraphs

Tags as additional content

Some tags can introduce totally new, non-textual information. These tags have to have additional information callend attributes. Attributes look like this <tag attribute="value"></tag>. One example tag is a, the anchor tag, which makes a link.

An a tag looks like this: <a href="https://example.com">this is a link</a>

Do this: Add a new a element. <h1>My Webpage</h1><b><i>Hello World</i></b> <a href="https://google.com">This is a link to Google</a>

Another example is the img tag, which looks like this: <img src="https://example.com/testimg.jpg">. Notice, this tag doesn't need a closing element.

Do this: Add a new img element. <h1>My Webpage</h1><b>Hello World</b> <a href="https://google.com">This is a link to Google</a><img src="https://static1.squarespace.com/static/575902b0356fb02619f85830/t/57f4b55e6b8f5b0e6b1ddfab/1475655029912/?format=300w" />

Adding style with CSS

HTML isn't intended to allow complete control of presentation. It would be too difficult to pack both the marked up content and the extra style directives in the same place. Instead, we'll use a new tag and some new attributes so that we can use CSS.

We're going to put our style information into a new tag, style

Do this: Add a new style element.

<style>
</style>
<h1>My Webpage</h1>
<b><i>Hello World</i></b>
<a href="https://google.com">This is a link to Google</a>
<img src="https://static1.squarespace.com/static/575902b0356fb02619f85830/t/57f4b55e6b8f5b0e6b1ddfab/1475655029912/?format=300w" />`

The text we're going to put into the style tag is in a different language, CSS. CSS is a two step process. First, you select the things you want to style. Then you use rules to style the things you selected. The format will look like this:

selector {
    rule-name: value;
    rule-name: value;
}

The simplest selector is just the name of a tag. Some of the rules have names like font-size or color.

Do this: Add a new block of CSS to change the color of the heading text.

<style>
    h1 {
    font-size: 21px;
    color: red;
}
</style>
<h1>My Webpage</h1>
<b><i>Hello World</i></b>
<a href="https://google.com">This is a link to Google</a>
<img src="https://static1.squarespace.com/static/575902b0356fb02619f85830/t/57f4b55e6b8f5b0e6b1ddfab/1475655029912/?format=300w" />`

Because this selector only says the name of the tag, it'll apply to all instances of the tag. Try adding another h1 tag to verify this.

We can combine selectors by using commas.

Do this: add a new block of CSS that applies to both the h1 and the b elements.

 <style>
 h1, b {
    color: blue;
 }
 h1 {
    font-size: 21px;
    color: red;
}
</style>
<h1>My Webpage</h1>
<b><i>Hello World</i></b>
<a href="https://google.com">This is a link to Google</a>
<img src="https://static1.squarespace.com/static/575902b0356fb02619f85830/t/57f4b55e6b8f5b0e6b1ddfab/1475655029912/?format=300w" />`

Something interesting happened! The "hello world" text turned blue, but the heading stayed red. This is because styles can override eachother. We declared the h1, b block first, so its effect was superceded by the CSS that was declared after it. This property of CSS is actually what gives it its name, Cascading Style Sheets. Try flipping the order of the blocks of CSS.

What did we leave out?

• Lots of CSS rules!
• Lots of HTML tags!
• Correct HTML structure, metadata
• How do webpages work over the internet?
• How do interactive webpages work?