MIT IAP 2021 Day 1 - HTML & CSS Lecture

前言

因为没有系统性的学习过前端，所以我的前端水平一直都是些三脚猫功夫，碰巧最近有几个月的完全空闲的时间，准备重新系统性地学习一下前端，为了尽可能快的掌握，我决定采用MIT IAP的课程，因为课程是英语讲授的，所以有关课程内容的的笔记我都会使用英文记录，以后的大部分笔记博文也以英文为主。

HTML

Definition

HTML stands for Hyper Text Markup Language. It's the language web browsers use to describe the structure and content of a web page.

In other words, HTML = Nested Boxes

Structure of `Hello World!.html`

A basic structure of HTML is as follows:

<!DOCTYPE html>
<html> # <- opening tag
    <head>
        <title>Title!</title>
    </head>
    <body>
        <h1>Heading</h1>
        <p>Paragraph</p>
    </body>
</html> # <- closing tag

Head tags(<head>) are used to describe the background information of the website, they can include the meta data of the website which can be used by search engine's spider.

The title element(<title>) is used to describe the title of the website, it will be displayed on the tab of the browser.

The body element(<body>) is used to describe the content of the website, it will be displayed on the main area of the browser.

Deeper in the body

The <h1> tag means the heading element, it's the highest priority heading on this page.

The <p> tag means the paragraph element, it's used to describe the paragraph of the website.

Basic HTML Tags

Tags	Meanings
`<html>`	Root of HTML Document
`<head>`	Info about Document
`<body>`	Document Body
`<h1>,<h2>,<h3>,…`	Header Tags
`<p>`	Paragraph tag
`<div>`	Generic block section tag

HTML Attributes

<tagname abc="xyz"> # <- opening tag
    # content goes here
</tagname> # <- closing tag

abc is the attribute name, xyz is the attribute value.

Eaxamples

Inserting Links

The first example is inserting links.

<a href="link here">
    #content goes here
</a>

href is the attribute name, link here is the attribute value.

Inserting Images

    <img src="yoda.gif"></img>

or, we can create a self-closing tag:

    <img src="yoda.gif" />

The file structure should look like this:

app/
    hello.html
    yoda.gif

The image should be in the same level folder as the html file.

If more orginaized, we can create a folder called images and put all the images in it.

app/
    hello.html
    images/
        yoda.gif

Then we can use the following code to insert the image:

    <img src="images/yoda.gif" />

Div

Back to the example of Hello World!.html, we can use the <div> tag to wrap the <h1> and <p> tags, so we can give them same attribute without adding them one by one.

<div>
    <h1>Heading</h1>
    <p>Paragraph</p>
</div>

There are a lot of tags in html.

The real way to learn Web Dev is

Google
Learn

Also, we can check on MDN for more information.

We can find a lot of information about html and css on MDN.

Don't recommend W3Schools(out of date).

Why not just use `<div>`?

The accessibility will be affected.

If you visit <div> on mdn, you will find

They don't have any semantic meaning.

There might be better options.

Why Semantics?

Benefits for:

Screen Readers
KeyBoard Navigation
Machine Readable/friendly to web crawlers(make your website more discoverable)
Human Readable(easier to maintain)

CSS

What is CSS?

CSS means Cascading Style Sheets.

It's the rules that tell your browser how stuff looks.

CSS = A list of discriptions
aka making things look pretty.

CSS ruleset

div {
    color: red;
    font-family: Arial;
    font-size: 24pt;
}

div in the very beginning is the selector, it tells the browser to apply the following rules to all the <div> tags.

In the list, color, font-family, font-size are the properties, red, Arial, 24pt are the values.

For example

<h1>Heading!</h1>
<div>Paragraph!</div>
<div>Info</div>

div {
    color: red;
    font-family: Arial;
    font-size: 24pt;
}

or we can set a class, we shoud add a class attribute to the <div> tag, and we should change the selector name.

<h1>Heading!</h1>
<div>Paragraph!</div>
<div class="info">Info</div>

.info {
    color: red;
    font-family: Arial;
    font-size: 24pt;
}

if use id

<h1>Heading!</h1>
<div>Paragraph!</div>
<div id="info">Info</div>

#info {
    color: red;
    font-family: Arial;
    font-size: 24pt;
}

The effect is the same as using class.

id is unique

ID vs Class

ID	Class
An element can have only one ID	An element cna have multiple classes
IDs must be unique in any given HTML document	Can use the same class on multiple elements

Only use classes for CSS styling!

Important Concept!

Tags such as <h1> have some default styling while <div> and <span> do not.

Any custom applied CSS will override the default styling.

Combining HTML and CSS

<!DOCTYPE html>
<html>
    <head>
        <title>Title!</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h1>Heading</h1>
        <p>Paragraph</p>
    </body>
</html>