Ref: Coursera - Duke Courses.
Link to Coursera - Duke Java Course: Link.
ROUGH NOTES (!)
Updated: 14/4/26
PROGRAMMING FOUNDATIONS WITH JAVASCRIPT, HTML, and CSS
[Course Overview]
By the end of this course, you will have designed a webpage that allows users to upload their image files and apply image filters that you created.
[Using CodePen]
We will use codepen.io.
We get windows as shown.
For now we will close the JS window.
Eg:
Here is the HTML code:
<h1>Hello</h1>
<ul>
<li>One thing</li>
<li>Two thing</li>
</ul>
Here is the CSS code:
li {
color : blue;
}
[What is HTML?]
We will explore the language of web page creation.
Note that a webpage typically has bold text, link text, images, URL (Uniform Resource Locator).
HTML (HyperText Markup Language) is a language used to create web pages.
HTML is NOT a programming language, it is a markup language (where we markup text to display information in certain ways).
HTML specifies meaning or semantics. How to display is different, here CSS helps.
HTML5 is the current standard for HTML.
Eg:
Note the tags.
The <html> tags are used to indicate we are using HTML to define the components of a webpage.
The <title> tags are used to define the text shown on the tab title.
The <body> tags are used to define the body of the webpage.
The <p> tags are used to define paragraphs.
[Metadata and Sectioning Elements]
We will look at two types of elements:
-
Metadata elements: These contain information about the page.
Eg:<html>,<head>,<title>tags. -
Sectioning elements: These define regions of the page.
Eg:<body>,<h1>,<div>tags.
In the context of a webpage, metadata is a set of data that describes information about a webpage.
Some more information about the metadata elements:
The <html> tag:
- Contains all other elements.
- Specifies using HTML standard.
The <head> tag:
- Includes information about the page, like title, scripts, CSS.
The <title> tag:
- Specifies page title.
- Nested inside
<head> </head>tags.
Eg: Note the metadata elements:
Some more information about the sectioning elements:
The <body> tag:
- Contains all items seen on page.
The <h1> tag:
- Defines the section header.
- We also have smaller headers
<h2>, ..., <h6>.
The <div> tag:
- Defines section of web page.
- Useful for grouping elements together to use CSS styling.
Eg: Note the sectioning elements in the above picture.