Programming Foundations with HTML
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 ! ]
Metadata Elements
1 | <html> |
Sectioning Elements
1 | <body> |
Semantic or Style HTML Tags
Tags surround [text]/[page elements]
1 | <b>Make text stylistically different, Traditionally bold face, but can change</b> |
Adding Images, Audios/Videos
1 | <img src="http://xyz.png" width="75%" /> |
copyright
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!
Linking Pages Together
1 | <a href="https://asd.org/en-US/HTML">EXAMPLE_LINKS</a> |
Lists
1 | // unordered list |
Tables
1 | <table> |
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.
…