惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

L
LINUX DO - 热门话题
Stack Overflow Blog
Stack Overflow Blog
B
Blog
WordPress大学
WordPress大学
Project Zero
Project Zero
P
Palo Alto Networks Blog
阮一峰的网络日志
阮一峰的网络日志
博客园 - 司徒正美
有赞技术团队
有赞技术团队
S
SegmentFault 最新的问题
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
小众软件
小众软件
T
Tailwind CSS Blog
Forbes - Security
Forbes - Security
F
Full Disclosure
SecWiki News
SecWiki News
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Hacker News: Ask HN
Hacker News: Ask HN
C
Check Point Blog
Microsoft Security Blog
Microsoft Security Blog
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
F
Fortinet All Blogs
Cisco Talos Blog
Cisco Talos Blog
G
Google Developers Blog
J
Java Code Geeks
Google DeepMind News
Google DeepMind News
人人都是产品经理
人人都是产品经理
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Recorded Future
Recorded Future
O
OpenAI News
Spread Privacy
Spread Privacy
MongoDB | Blog
MongoDB | Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
C
Cybersecurity and Infrastructure Security Agency CISA
S
Securelist
V
Vulnerabilities – Threatpost
Y
Y Combinator Blog
IT之家
IT之家
U
Unit 42
腾讯CDC
S
Security Affairs
C
Cisco Blogs
Schneier on Security
Schneier on Security
The Last Watchdog
The Last Watchdog
B
Blog RSS Feed
宝玉的分享
宝玉的分享
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
S
Security @ Cisco Blogs
Cyberwarzone
Cyberwarzone
T
The Blog of Author Tim Ferriss

peijie's wiki

怎么抢高铁票 - peijie's wiki 两日游背包收纳 - peijie's wiki 什么是 AI,什么是大语言模型,缺点分析,以及使用技法和技巧总结 - peijie's wiki macOS 里关于“名字”的那些事 - peijie's wiki 将 CapsLock 映射为 Escape,对于macos - peijie's wiki 拔智齿后的食谱 - peijie's wiki 拔智齿后的食谱 - peijie's wiki proxy搭建稳如老狗的原理(老白版) - peijie's wiki 混音原理,Linux混音实操,有线麦克风录音+混录系统BGM+耳返监听 - peijie's wiki Linux 搜索最佳实践【入门版】 - peijie's wiki 线材库存 - peijie's wiki 药品库存 - peijie's wiki pacman - peijie's wiki chinese-input-method-setup - peijie's wiki Programming Concepts and Algorithms/Solutions - peijie's wiki Programming Foundations with CSS - peijie's wiki 如何高效地学习一门编程语言 - peijie's wiki 低卡火锅蘸料 - peijie's wiki 使用键盘组合键启动iTerm - peijie's wiki 中餐厨艺课 - peijie's wiki liupj.top
Programming Foundations with HTML - peijie's wiki
lpj · 2025-03-25 · via peijie's wiki

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 !


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

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

Note: 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 ! ]

https://www.bilibili.com/video/BV1GkewzwEbK


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

etc...

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>
- paragraphs.

etc...

Tags surround [text]/[page elements]

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

eg:
If you have trouble seeing, then it's(<b></b>) a semantics/meaning
to helps screen reader to change how text is read to you(a blind user).

Adding Images, Audios/Videos

1
2
3
4
5
6
7
8
9
10
<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, which means source),
because of that we have to specify what image we want to display.

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, and some creative_commons_images are not copyrighted.

Images Storage

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

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

我曾经自建图床

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, even if it’s not you.

Inline-Linking/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 Linking, 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
7
8
9
<a href="https://asd.org/en-US/HTML">EXAMPLE_LINKS</a>

Note:

a means anchor.
href is required!

You must specify some text between the start and end anchor tag,
and this text will be clickable to take you to an another website.

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 li tags we can put much more than just text,
we can put images, links or even another list.

Tables

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

Test your webpage

You can 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 images.

Be aware of…

Making a webpage good isn’t easy.

Webpages can be displayed on different types of divices, such as your laptop, your phone.

Webpages can be used by different types of people, such as normal user, blind user.