OFFERED BY Duke UNIVERSITY
https://www.dukelearntoprogram.com

Let’s begin to learn how to think like a programmer:

analyzing problems, designing solutions called algorithms, and translating your algorithms into programs.

Reading document please, so that you will know what methods you can use in a programming language.

Use https://codepen.io to play around !

Note:

  • HTML is not a programming language but rather a Markup Language.

  • HTML is used by web browsers to display a webpage.

  • You may have written documents in which you select text and make it bold or underlined or italics, [this is a way of marking up the text to display in certain ways ! ]

Metadata Elements

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
	- specifies using HTML standard
	- contains all other elements

<head>
	- information about the page: title, css, scripts, ...

<title>
	- specifies page title
	- nested inside <head></head> tags

...

Sectioning Elements

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    - contains all items seen on page

<div>
    - defines section of webpage
    - [useful for grouping elements together to use CSS styling ! ]

<h1>
    - section header
    - also <h2>, <h3>, ..., <h6>

<p>
    - means paragraphs.

...

Semantic or Style HTML Tags

Tags surround text or page elements

1
2
3
4
5
6
7
<b>Make text stylistically different</b>
<b>Traditionally bold face, but can change</b>

eg:
The bold text might be displayed differently if you have trouble seeing.
For example, if the webpage is used by a screen reader,
it's a semantics or meaning and helps the screen reader change how text is read to a blind user.

Adding Images, Videos, Audios

1
2
3
4
5
6
7
<img src="http://xyz.png" width="75%" />
<img src="http://xyz.png" />

Note:
We can add Options(eg: src, width) in the image tags which give information about what we're doing.
Some Options are required!(eg: src) because of that we have to specify what image we want to display.
src means source.

What to use for src=”..” ?

In some cases, there may be concern with the person, organization or group that create the photo you display on a webpage you create. The creator has certain rights called copyrights.

Many images are in the public_domain and are not copyrighted.(eg: Wikimedia commons website)

Some images have what are called creative commons licenses, which specify how you can use the images.

Some creative_commons_images are not copyrighted.

Images Storage

In some cases, there may be storage and hosting concerns.

Where are the images stored that you’ve included on your webpage? And who pays for that storage?

我曾经自建图床

There are similar concerns with videos, though videos hosted on YouTube/Bilibili.

Suppose one million people view your webpage, it means that the image is sent from the website which stores it, across the Internet to one million users that might be scattered all over the world! Someone pays for hosting the image and for serving it to everyone, even if it’s not you.

Inline Linking or Hot Linking

When you use a URL in a webpage you create as part of an IMG tag, you’ve included what’s called an inline link.

Inline Linking is also called Hot Linking.

It means that the image is stored on another site but visually it appears in the site you create.

If you create a webpage with lots of views or traffic, there may be storage costs or server costs that might be a concern. => Thus some sites don’t allow hot-linking!

Further reason and solution.

Linking Pages Together

1
2
3
4
5
6
<a href="https://asd.org/en-US/HTML">EXAMPLE_LINKS</a>

Note:
a means anchor_tag.
href attributes is required!
You must specify some text between the start and end anchor tag. This text will be clickable to take you to other websites.

Lists

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// unordered list
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

// ordered list
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

li tag stands for list items, [is required]. and are the only type of tag you can put as direct children of ul/ol tag.

inside the li tags we can put much more than just text, we can put images, links or [even another list]! => Nesting is a common concept in computer science, which refers to one of a thing being inside of another of that thing!

Composition is another important concept in computer science. This property lets you build large, complex systems, whether webpages or programs, in a way that you can understand.

Tables

1
2
3
4
<table>
<tr>    => table row
<th>    => table header
<td>    => table data

Test your webpage

You may use private browsing to be sure that you are behaving like an anonymous user rather than being logged in as yourself when looking at a webpage.

eg: to be sure that you can see the images.

Be aware of…

Making a webpage look good isn’t easy.

Note that webpages can be displayed on different types of divices, such as your laptop, your phone.

It’s a bit more challenge to create a webpage that displays well on both large and small displays.

Interactivity is also a challenge.

[done]