Afghanistan
Albania
Algeria
Andorra
Anguilla
Antigua & Barbuda
Argentina
Armenia
Aruba
Australia
Austria
Azerbaijan
Bahamas
Bahrain
Bangladesh
Barbados
Belarus
Belgium
Belize
Benin
Bermuda
Bhutan
Bolivia
Bonaire
Bosnia & Herzegovina
Botswana
Brazil
British Indian Ocean Ter
Brunei
Bulgaria
Burkina Faso
Burundi
Cambodia
Cameroon
Canada
Canary Islands
Cape Verde
Cayman Islands
Central African Republic
Chad
Channel Islands
Chile
China
Christmas Island
Cocos Island
Colombia
Comoros
Congo
Cook Islands
Costa Rica
Cote D Ivoire
Croatia
Cuba
Curacao
Cyprus
Czech Republic
Denmark
Djibouti
Dominica
Dominican Republic
East Timor
Ecuador
Egypt
El Salvador
Equatorial Guinea
Eritrea
Estonia
Ethiopia
Falkland Islands
Faroe Islands
Fiji
Finland
France
French Guiana
French Polynesia
French Southern Ter
Gabon
Gambia
Georgia
Germany
Ghana
Gibraltar
Greece
Greenland
Grenada
Guadeloupe
Guam
Guatemala
Guinea
Guyana
Haiti
Hawaii
Honduras
Hong Kong
Hungary
Iceland
India
Indonesia
Iran
Iraq
Ireland
Isle of Man
Israel
Italy
Jamaica
Japan
Jordan
Kazakhstan
Kenya
Kiribati
Korea North
Korea South
Kuwait
Kyrgyzstan
Laos
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
Macau
Macedonia
Madagascar
Malawi
Malaysia
Maldives
Mali
Malta
Marshall Islands
Martinique
Mauritania
Mauritius
Mexico
Midway Islands
Moldova
Monaco
Mongolia
Montserrat
Morocco
Mozambique
Myanmar
Nambia
Nauru
Nepal
Netherland Antilles
Netherlands (Holland, Europe)
Nevis
New Caledonia
New Zealand
Nicaragua
Niger
Nigeria
Niue
Norfolk Island
Norway
Oman
Pakistan
Palau Island
Palestine
Panama
Papua New Guinea
Paraguay
Peru
Philippines
Pitcairn Island
Poland
Portugal
Puerto Rico
Qatar
Republic of Montenegro
Reunion
Romania
Russia
Rwanda
Saipan
Samoa
Samoa American
San Marino
Sao Tome & Principe
Saudi Arabia
Senegal
Serbia
Seychelles
Sierra Leone
Singapore
Slovakia
Slovenia
Solomon Islands
Somalia
South Africa
Spain
Sri Lanka
St Barthelemy
St Eustatius
St Helena
St Kitts-Nevis
St Lucia
St Maarten
St Pierre & Miquelon
St Vincent & Grenadines
Sudan
Suriname
Swaziland
Sweden
Switzerland
Syria
Tahiti
Taiwan
Tajikistan
Tanzania
Thailand
Togo
Tokelau
Tonga
Trinidad & Tobago
Tunisia
Turkey
Turkmenistan
Turks & Caicos Is
Tuvalu
Uganda
Ukraine
United Arab Emirates
United Kingdom
United States of America
Uruguay
Uzbekistan
Vanuatu
Vatican City State
Venezuela
Vietnam
Virgin Islands (Brit)
Virgin Islands (USA)
Wake Island
Wallis & Futana Is
Yemen
Zaire
Zambia
Zimbabwe
HTML forum
Why Javascript and Web?
Should be able to show it to your friends
Small website that interacts with the blockchain
Back-end
Front-end
All applications are 2 parts:
Should be able to build things that work.
Ethereum DAPs
NEM blockchain
JavaScript
Good newbie language
Will be able to recognize other languages.
HTML
Static, Boring websites
Add logic to website
Choose Your Weapon
Sublime
VS Code
Will simplify the whole process
Need syntax highlighting
Text editor
Atom
Notepad++
HTML syntax
Not a programming language
Consists of a series of elements
Markup Langauge
HyperText Markup Language
Used to structure a web page.
Data tables
Sets of paragraphs
List of bulleted points
Images
Encloses different parts of content
Marked for apperances
Marked for behaviors
Can hyperlink to somewhere else
Change fonts
Bold or Italicize
Font size or color
Element
closing tag
Content
Opening tag
</p>
<p>
Matching element names
Missing closing tag: easy beginner error.
Attributes
<p class = "editor-note">
</strong>
<strong>
Nested elements
Must close nests in reverse creation order
Empty elements: attributes but no content.
<img src="blah.jpg">
Reading Assignment
HTML Basics
Sample
Further Reading
HTML Structure
<!DOCTYPE> is deprecated.
<body> data to display </body>
<title> browser title for page </title>
<meta charset="utf-8"> set to default unicode
<head> tags, CSS, etc </head>
<html> root element </html>
<img>
Try to be succinct, but descriptive.
file error
Accesibility page readers
alt="fail 2 load text"
src="path/file.ext"
attributes
text
Used for accessibility
Lists
<ul> unordered list </ul>
<p> paragraph </p>
h1 through h6 are intrinsic.
<h1> Headings </h1>
Used for SEO
<ol> ordered lists </ol>
<li> list item <li>
achors
href="hypertext reference"
<a> anchor </a>
<a attribute> </a>
Questions
Why are we learning HTML?
To create foundational static, boring websites.
What is an HTML tag?
Used to structure a webpage
HyperText Markup Language
What is HTML?
What is HTML used for?
What is an attribute?
What is the anatomy of an HTML document?
The beginning and ending syntax for an HTML element
A property/value pair added to an element.
<!DOCTYPE html>
<body>
</html>
<html>
</body>
</head>
<head>
<meta charset = "utf-8">
<title> My test page </title>
First Exersize
Notice editor syntax highlighting.
Open AND /close it
Find a comfortable spot to save working files
File > New File
All websites begin with <html> </html>
Build a webpage from scratch
Whitespace does not matter.
Content in the middle
Create first tag
File -> Save As
Open editor
Call it Website.html
Tells system what interpreter to use.
<html> Here is the web page </html>
Create more tags
<head> </head>
Webpage metadata
Add some content
<body> </body>
Content to display
Paragraphs <p> </p>
Links
Images
Headers
Styles
Save File
Open in Browser
Experiment
<body> Use more tags </body>
<h1> This is the title </h1>
<h2> This is smaller title </h2>
<title>This is a GREAT website</title>
Refresh
<head>Use more tags</head>
Defines Browser Tab Title
Can write the whole web page on one line
Whitespace does not matter
Use good whitespace
Maintainability
Assignment
Begin with in-class webpage
Learn on own: how to make this list:
Abuse Google.
Find answers to questions.
Need 2 tags to do this.
Google "html how to create list"
Programming is learning how to learn.
My Solution
My Solution
Hint
Programming Mindset
Find example
Thought Process
Google "html make list"
Order of HTML code affects webpage results
Its all about experimentation
Try different things
Try adding paragraphs
Can you have an <h1> in a list?
Trait of a <p> is that it creates space around it.
Yes.
Try to play around
Try to break things
Mindset you need to have
Should be able to google and find answers
Try adding a link
Need an <a>nchor tag
Need an href = "" attribute
Write URL and close tag
Write text to click
Ivan's Solution
Specify what bullet points you want to have.
<li> list item </li>
Open list <ul> (unordered list)
Distinguish between <ul> (bullets) and <ol> (numbered)
Homework
Use Google
Learn on your own.
Insert an image into the website
Find some clues
Find an image "labeled for re-use"
Use "copy image link
Recap
Websites are made of nested tags
Tags open or close
Some tags open and close simultaneously
<head> metadata </head>
Later we will be building websites that are interfaces for smart contracts
Harvard
Further Reading
Learn More HTML in 12 Minutes
Learn HTML in 12 Minutes
HTML Crash Course for Absolute Beginners
HTML Tutorial for Beginners Learn HTML in 30 Minutes
"noisyCricket" practice.
Bing search results
Google search results
Contains 2 frames
Build a website
Add a title.
Add start/stop buttons.